基于Github搭建Hexo个人博客

发表于

系统环境配置

1
2
Node.js
Git

安装Hexo

1
2
3
4
5
6
7
cd hexo
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo g
hexo s

Hexo 常用命令

hexo g 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹
hexo s 启动本地web服务，用于博客的预览
hexo d 部署播客到远端

1
2
hexo new 'postName' --- 新建文章
hexo new page "pageName" --- 新建页面

常用简写

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

目前安装所用的本地环境如下：(可以通过hexo -v查看)

Hexo 主题设置

安装主题

1
2
hexo clean
git clone https://github.com/iissnan/hexo-theme-next.git themes/next

启用主题
修改Hexo目录下的_config.yml配置文件中的theme属性，将其设置为next

更新主题

1
2
3
4
cd themes/next
git pull
hexo g # 生成
hexo s # 启动本地web服务器

部署Hexo到Github Pages

使用hexo deploy部署
修改Hexo目录下的_config.yml配置文件

1
2
3
4
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: master

需要提前安装一个扩展

1
npm install hexo-deployer-git --save

然后在命令行中执行

1
hexo d

使用git命令行部署

1
2
cd hexo/blog
git clone https://github.com/username/username.github.io.git .deploy/username.github.io

将github上创建的博客克隆到本地，新建一个目录叫做.deploy用于存放克隆的代码

创建一个deploy脚本文件

1
2
3
4
5
6
hexo generate
cp -R public/ .deploy/username.github.io
cd .deploy/username.github.io
git add .
git commit -m “update”
git push origin master

图片显示

  • cd到博客根目录下 查看_config.yml文件 查找 post_asset_folder 字段确定post_asset_folder 设置为true -> post_asset_folder:true
  • 当您设置 post_asset_folder 参数后，在建立文件时，Hexo 会自动建立一个与文章同名的文件夹，您可以把与该文章相关的所有资源都放到此文件夹内，这样就可以更方便的使用资源。
  • 到博客的根目录下执行 npm install https://github.com/CodeFalling/hexo-asset-image –save 命令来进行插件的安装。
  • 然后创建一文章 hexo new “test” 然后查看博客的 ../source/_posts 目录下的文件，会看到存在一个 test 文件夹和 test.md 文件,文件夹中放入图片1.jpg
  • 文中引用图片![](test/1.jpg)

Hexo 配置主题

主题配置在themes文件下_config.yml

设置主题风格

打开themes/next下的_config.yml文件，搜索 scheme关键字，将你需用启用的scheme 前面注释 # 去除即可。

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse # 默认 Scheme，默认版本
#scheme: Mist # Muse 的紧凑版本
scheme: Pisces # 双栏 Scheme
#scheme: Gemini # 类似 Pisces

添加头像

打开themes/next下的_config.yml文件，搜索 Sidebar Avatar关键字，去掉avatar前面的#

1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
avatar: http://example.com/avatar.png

或者使用本地图片,把图片放入themes/next/source/images下,修改avatar

1
avatar: /images/blogLogo.png

设置阅读原文

用编辑器打开themes/next 目录下的_config.yml文件

找到代码：

1
2
3
auto_excerpt:
    enable: false
    length: 150

将enable的 false改成true，length可以设定文章预览的文本长度。

社交链接

打开themes/next下的_config.yml文件,搜索关键字social,然后添加社交站点名称与地址即可。

1
2
3
4
5
6
7
8
# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  Weibo: https://weibo.com/your-user-name
  douban: https://douban.com/people/your-user-name
  zhihu: https://www.zhihu.com/people/your-user-name
  # 等等

友情链接

打开themes/next下的_config.yml文件,搜索关键字Blog rolls

1
2
3
4
5
6
7
# Blog rolls
links_title: 友情链接 #标题
links_layout: block #布局，一行一个连接
#links_layout: inline
links: #连接
  baidu: http://example.com/
  google: http://example.com/

参考链接

Hexo 搭建博客