搭建个人博客

发表于 | 分类于

在网上浏览技术文章的时候，经常看到有人把文章发布到自己的个人博客上，感觉挺高端的，在查阅了相关资料后，也搭建了自己的个人博客，这篇文章就是我搭建个人博客的总结。

注意

本文主要是针对Windows环境，在Mac环境除了软件安装方式和命令有所区别外，其它基本一样。

创建域名和空间

创建GitHub域名

博客是托管在GitHub上的，首先要注册GitHub账号，注册的时候注意username，因为GitHub域名将是username.github.io，注册完毕后，GitHub域名也就创建了。

创建Blog存储空间

Blog本质是一个网站，那么需要一个空间去存储网站的内容，这里使用GitHub的仓库(Repository)存储网站的内容，所以，需要在GitHub上创建一个仓库，Repository name就用上一步创建的域名：username.github.io，仓库创建完毕后，Blog存储空间也就创建了。

安装必要的工具

Hexo是目前比较流行的博客框架，基于Node.js，可以使用 Markdown解析文章。要使用Hexo，需要安装Git，Node.js，Hexo工具。

安装Git

Git用于把Hexo生成的本地网站内容提交到GitHub上，可以去Git官网下载安装程序进行安装，安装完毕后，需要在GitHub上配置SSH keys，具体配置方式可以参考Connecting to GitHub with SSH。

安装Node.js

Node.js是Hexo的运行环境，可以去Node.js官网下载安装程序进行安装，安装过程中，注意勾选Add to PATH选项。

安装Hexo

在Git和Node.js安装完毕后，可在Git Bash中使用npm安装Hexo，由于Hexo的很多操作都涉及到命令行，可以考虑始终使用Git Bash来进行操作。

1
$ npm install -g hexo-cli

创建网站和配置

Hexo安装完毕后，接下来利用Hexo创建一个网站，并进行一些基本的配置。

创建网站

执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

基本配置

配置信息在网站的_config.yml文件中，可以根据需要进行配置，记得保存，注意配置的键值之间一定要有空格。

网站配置

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 你的名字
language 网站使用的语言
timezone 网站时区

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。下面附上我自己的配置，以供参考：

1
2
3
4
5
6
7
# Site
title: Zhou Zejin's Home
subtitle: 想象力比知识更重要！
description: Sunny的个人Blog，主要记录Android学习总结，欢迎交流~
author: Zhou Zejin
language: zh-Hans
timezone:

其它配置可以参考更多配置。

部署配置

这里只讲述Git的部署配置，其它方式的部署配置参考部署配置。

参数 描述
repo 库(Repository)地址
branch 分支名称
message 自定义提交信息

下面是我的部署配置：

1
2
3
4
5
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:zhouzejin/zhouzejin.github.io.git

工作流程

网站创建和配置完毕后，接着就可以撰写博客，并进行发布了。

新建

1
$ hexo new [layout] <title>

如果没有设置 layout 的话，默认使用_config.yml中的 default_layout 参数代替。如果标题包含空格，要使用引号括起来。

创建的文章在username.github.io/source/_posts目录下，默认是Markdown文件，在具体撰写博客前，可以学习一下Markdown语法。

测试

1
$ hexo server

启动本地服务器。默认情况下，访问网址为： http://localhost:4000/

选项 描述
-p, –port 重设端口
-s, –static 只使用静态文件
-l, –log 启动日记记录，使用覆盖记录格式

注意

上述方式如果无法启动Server，很大可能是默认端口4000被占用，可以更换其它端口重新启动

1
$ hexo server -p 5000

服务器启动后，就可以浏览文章的排版和效果，如果不满意，可以直接修改文章对应的Markdown文件，修改完毕后，直接刷新就可以看到修改后的效果，不必重启Server。

发布

使用Git发布需要先安装hexo-deployer-git插件（更多插件使用可以参考Hexo插件）：

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

发布前先要生成网站的静态文件：

1
$ hexo generate

生成完毕后就可以进行发布：

1
$ hexo deploy

生成和发布操作可以使用一个命令完成：

1
$ hexo d -g

发布成功后，在浏览器输入username.github.io就可以进行访问了。

注意

在某些情况（尤其是更换主题后），如果发现对网站的更改无论如何也不生效，可以使用clean命令清除缓存文件(db.json)和已生成的静态文件(public)，然后再进行发布。

1
$ hexo clean

Hexo的更多使用可以参考Hexo官网文档

自定义主题

经过以上步骤，个人博客就搭建完毕了，但是为让自己的博客更美观，可以更换默认主题，这里使用现在比较流行的NexT主题，如果需要使用其它主题，可以参考Hexo主题。

下面只对我自己用到的主题配置和第三方服务进行总结，更多配置和服务可以参考NexT使用文档。

主题安装

下载主题

在终端窗口下，定位到Hexo站点目录下。使用Git checkout代码：

1
2
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

在网站的_config.yml文件中，找到theme字段，并将其值更改为next：

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

主题配置

如果没有特殊说明，主题的配置都是在主题的_config.yml文件中进行的。

菜单配置

每个菜单项目的配置都是类似的，接下来以配置about菜单进行说明：

  • 在终端窗口下，定位到Hexo站点目录，创建一个名为about的页面
1
hexo new page "about"
  • 编辑分类页, 设置页面类型为about
1
2
3
title: 关于
date: 2017-11-24 16:00:52
type: "about"
  • 添加about到主题配置文件中menu字段下
1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  categories: /categories/ || th
  tags: /tags/ || tags
  archives: /archives/ || archive
  about: /about/ || user
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

配置完categories和tags菜单后，可以参考Hexo的Front-matter文档为文章添加分类和标签。

侧边栏配置

  • 在移动设备上显示侧边栏
1
2
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: true
  • 设置头像

将头像放在网站目录下的source/uploads/路径，若uploads目录不存在则新建，然后在主题配置文件中进行如下配置：

1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /uploads/Sanji.jpg
  • 添加社交链接

在主题配置文件下的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
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name
  # 等等

RSS配置

安装hexo-generator-feed插件

1
$ npm install hexo-generator-feed --save

安装成功后，就可以在侧边栏看到RSS订阅的标识了。

开启打赏功能

只需要主题配置文件中填入微信和支付宝收款二维码图片地址即可开启该功能：

1
2
3
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

网站footer个性化显示

如果想自定义网站底部的信息，可以在主题配置文件进行如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since: 2017

  # Icon between year and copyright info.
  icon: user

  # If not defined, will be used `author` from Hexo main config.
  copyright:
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: true

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: true
    # Version info of NexT after scheme info (vX.X.X).
    version: false

设置「阅读全文」

在主题配置文件中添加：

1
2
3
auto_excerpt:
  enable: true
  length: 150

默认截取的长度为 150 字符，可以根据需要自行设定。

第三方服务

可以为主题添加一些第三方服务来丰富网站的功能。

内容分享服务

编辑主题配置文件，添加字段jiathis，值为true：

1
2
# JiaThis 分享服务
jiathis: true

搜索服务

  • 安装hexo-generator-searchdb插件
1
$ npm install hexo-generator-searchdb --save
  • 编辑站点配置文件，新增以下内容到任意位置
1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  • 编辑主题配置文件，启用本地搜索功能
1
2
3
# Local search
local_search:
  enable: true

参考资料

5分钟 搭建免费个人博客
Hexo官方文档
NexT使用文档

坚持原创技术分享，您的支持将鼓励我继续创作！
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多