hexo部署步骤

Posted on Edited on Views:

搭建一个由hexo生成的博客网站,由github进行托管

一. 安装nodejs 和npm

1
2
npm -v
node -v

二. 安装hexo-cli

1
2
3
4
5
npm install -g hexo-cli 
hexo init blog
hexo new test_my_site
hexo g
hexo s

在浏览器输入地址:

localhost:4000

三. 改变主题

https://github.com/next-theme/hexo-theme-next

https://theme-next.js.org/docs/getting-started/configuration.html

https://theme-next.js.org/docs/theme-settings/

https://realfavicongenerator.net/

More info: 主题配置

1
2
3
4
cd hexo-site
git clone https://github.com/next-theme/hexo-theme-next
cp themes/next/_config.yml _config.next.yml

将_config.yml里面的theme 修改为:

1
theme: next

三. 在github新建一个仓库

创建一个仓库名为: 用户名.github.io

在_config.yml里面进行配置:

1
2
3
4
deploy:
  type: git
  repo: https://github.com/Ran-oops/Ran-oops.github.io.git
  branch: master
1
npm install hexo-deployer-git --save
1
hexo clean && hexo g -d

四. 为了让博客里面的照片显示出来

  1. 修改hexo 目录下的 .config.yml 文件, 将 post_asset_folder: false 修改为 post_asset_folder: true

  2. 安装一个图片路径转换的插件。npm install https://github.com/7ym0n/hexo-asset-image --save

  3. 安装完这个插件之后, 当我们创建新文章时 hexo new post "new article" ，就自动在 new article.md 文件的同目录下创建一个同名的文件夹，这里就是文件夹 new article 。我们把在 new article.md 使用的图片放入该文件夹中, 使用![](new article/hexo.png)语法来插入图片

参考文章:(1条消息) Hexo+Github博客：网站内图片不能正常显示，但本地文件可以显示_神奇小海螺的博客-CSDN博客

五. 将首页列表页的文章折叠

将<!-- more -->插入到文章某一段文字之后,之后的内容隐藏了,需要点击 Read More才可以看到详情页

参考文章: GitHub+Hexo 搭建个人网站详细教程 - 知乎 (zhihu.com)