Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

快速开始

创建文章

1
$ hexo new "My New Post"

在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文章模板来建立文件。

1
$ hexo new <模板> "文章文件名称"

更多内容: Writing

本地启动服务

1
2
$ hexo server
$ hexo s

更多内容: Server

生成静态文件

1
2
$ hexo generate
$ hexo g

更多内容: Generating

部署到远程站点(需要配置一键部署)

1
2
$ hexo deploy
$ hexo d

更多内容: Deployment

一键部署

前提：本地配置好SSL连接
安装 hexo-deployer-git： 

1
$ npm i hexo-deployer-git --save

在 _config.yml 中添加以下配置（如果配置已经存在，请将其替换为如下）:

1
2
3
4
5
6
deploy:
  type: git
  repo: https://github.com/<username>/<project>
  # example, https://github.com/VicoBlog/vicoblog.github.io
  branch: main
  message: [提交信息]

执行 hexo clean && hexo deploy 。
浏览 username.github.io，检查你的网站能否运作。

使用 Markdown 嵌入图片

hexo-renderer-marked 3.1.0 引入了一个新的选项，可以在 markdown 中嵌入图片。

安装hexo-renderer-marked：

1
$ npm install hexo-renderer-marked --save

如需启用：

1
2
3
4
5
_config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

设置完后用hexo new “文章标题”创建文章时会自动创建一个同名的文件夹，用于存放资源文件，一定要用这个方法创建文章。使用![]()方法必须将图片放在新建文件时生成的同名文件夹目录下，然后在编辑器中使用以下命令格式即可添加图片：
java 代码解读复制代码 

1
![图片描述](image.png) // 这里的图片路径直接填图片名即可，不需要在添加其它目录

启用后，资源图片将会被自动解析为其对应文章的路径。 例如： image.jpg 位置为 /2020/01/02/foo/image.jpg ，这表示它是 /2020/01/02/foo/ 文章的一张资源图片， ![image](image.jpg) 将会被解析为
<img src="/2020/01/02/foo/image.jpg"> 。

图片懒加载

图片懒加载是提升网站性能和用户体验的一个非常很好方式，并且几乎所有的大型网站都使用到了，比如微博，仅把用户可见的部分显示图片，其余的都暂时不加载，做法就是：让所有图片元素src指向一个小的站位图片比如loading，并新增一个属性(如data-original)存放真实图片地址。每当页面加载（或者滚动条滚动），使用JS脚本将可视区域内的图片src替换回真实地址，并做请求重新加载。 

1
$ npm install hexo-lazyload-image --save

_config.yml配置文件添加： 

lazyload:
  enable: true  # 是否开启图片懒加载
  onlypost: false  # 是否只对文章的图片做懒加载
  loadingImg: # eg ./images/loading.gif
  isSPA: true  # 必须
分享文章

快来参与讨论吧~