如何搭建一个免费的个人博客?

作者：咻咻ing

博客：https://xiuxiuing.gitee.io/blog

前言

上次讲了《为什么优秀的程序员都写博客？》今天要给大家带来咻咻ing的投稿，如何搭建一个个人博客。当然，除了自己搭建还有很多优秀的写作平台。（CSDN，博客园，掘金 ....）

使用Gitee+Hexo搭建个人博客

为何使用Gitee而不是GitHub。

目前国内访问GitHub速度慢，还可能被墙，所以Gitee来构建个人博客。Gitee类似国内版的GitHub，访问速度有保证。

环境要求

Git

NodeJs

默认你已经安装了Git 和 NodeJS (推荐使用cnpm)

Git安装教程：

https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396287703354d8c6c01c904c7d9ff056ae23da865a000

Nodejs安装教程：

https://www.runoob.com/nodejs/nodejs-install-setup.html

cnpm使用教程：

https://xiuxiuing.gitee.io/blog/2018/08/25/cnpm/

开始搭建

1.安装Hexo

打开 shell 终端，输入命令：

npm install -g hexo

$ sudo cnpm install -g hexo
Password:
Downloading hexo to /usr/local/lib/node_modules/hexo_tmp
Copying /usr/local/lib/node_modules/hexo_tmp/_hexo@3.7.1@hexo to /usr/local/lib/node_modules/hexo
Installing hexo's dependencies to /usr/local/lib/node_modules/hexo/node_modules
[1/27] abbrev@^1.0.7 installed at node_modules/_abbrev@1.1.1@abbrev
[2/27] archy@^1.0.0 installed at node_modules/_archy@1.0.0@archy
[3/27] hexo-i18n@^0.2.1 installed at node_modules/_hexo-i18n@0.2.1@hexo-i18n
[4/27] js-yaml@^3.6.1 existed at node_modules/_js-yaml@3.12.0@js-yaml
[5/27] bluebird@^3.4.0 installed at node_modules/_bluebird@3.5.1@bluebird
[6/27] chalk@^2.3.1 installed at node_modules/_chalk@2.4.1@chalk
[7/27] hexo-front-matter@^0.2.2 installed at node_modules/_hexo-front-matter@0.2.3@hexo-front-matter
[8/27] minimatch@^3.0.4 installed at node_modules/_minimatch@3.0.4@minimatch
[9/27] pretty-hrtime@^1.0.2 installed at node_modules/_pretty-hrtime@1.0.3@pretty-hrtime
[10/27] hexo-util@^0.6.3 installed at node_modules/_hexo-util@0.6.3@hexo-util
[11/27] hexo-cli@^1.1.0 installed at node_modules/_hexo-cli@1.1.0@hexo-cli
[12/27] resolve@^1.5.0 installed at node_modules/_resolve@1.8.1@resolve
[13/27] strip-indent@^2.0.0 installed at node_modules/_strip-indent@2.0.0@strip-indent
[14/27] strip-ansi@^4.0.0 installed at node_modules/_strip-ansi@4.0.0@strip-ansi
[15/27] text-table@^0.2.0 installed at node_modules/_text-table@0.2.0@text-table
[16/27] tildify@^1.2.0 existed at node_modules/_tildify@1.2.0@tildify
[17/27] titlecase@^1.1.2 installed at node_modules/_titlecase@1.1.2@titlecase
[18/27] moment@^2.19.4 installed at node_modules/_moment@2.22.2@moment
[19/27] moment-timezone@^0.5.14 installed at node_modules/_moment-timezone@0.5.21@moment-timezone
[20/27] hexo-log@^0.2.0 installed at node_modules/_hexo-log@0.2.0@hexo-log
[21/27] swig-extras@0.0.1 installed at node_modules/_swig-extras@0.0.1@swig-extras
[22/27] lodash@^4.17.5 installed at node_modules/_lodash@4.17.10@lodash
[23/27] cheerio@0.22.0 installed at node_modules/_cheerio@0.22.0@cheerio
fsevents@1.2.4 download from binary mirror: {"module_name":"fse","module_path":"./lib/binding/{configuration}/{node_abi}-{platform}-{arch}/","remote_path":"./v{version}/","package_name":"{module_name}-v{version}-{node_abi}-{platform}-{arch}.tar.gz","host":"https://cdn.npm.taobao.org/dist/fsevents"}
[24/27] nunjucks@^3.1.2 installed at node_modules/_nunjucks@3.1.3@nunjucks
[25/27] swig-templates@^2.0.2 installed at node_modules/_swig-templates@2.0.2@swig-templates
[26/27] hexo-fs@^0.2.0 installed at node_modules/_hexo-fs@0.2.3@hexo-fs
[27/27] warehouse@^2.2.0 installed at node_modules/_warehouse@2.2.0@warehouse
execute post install 2 scripts...
[1/2] scripts.postinstall nunjucks@^3.1.2 run "node postinstall-build.js src"
[1/2] scripts.postinstall nunjucks@^3.1.2 finished in 109ms
[2/2] scripts.install hexo-fs@0.2.3 ? chokidar@1.7.0 ? fsevents@^1.0.0 run "node install"
[fsevents] Success: "/usr/local/lib/node_modules/hexo/node_modules/_fsevents@1.2.4@fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
[2/2] scripts.install hexo-fs@0.2.3 ? chokidar@1.7.0 ? fsevents@^1.0.0 finished in 306ms
deprecate titlecase@^1.1.2 no longer maintained
Recently updated (since 2018-08-01): 1 packages (detail see file /usr/local/lib/node_modules/hexo/node_modules/.recently_updates.txt)
2018-08-06
→ resolve@1.8.1 ? path-parse@^1.0.5(1.0.6) (14:32:36)
All packages installed (280 packages installed from npm registry, used 4s, speed 1.65MB/s, json 236(1.51MB), tarball 5.8MB)
[hexo@3.7.1] link /usr/local/bin/hexo@ -> /usr/local/lib/node_modules/hexo/bin/hexo

注：如果提示权限错误，命令前加sudo,cnpm 是淘宝的开源镜像，国内访问比npm快。

2.初始化Hexo

在你的电脑上创建Hexo文件夹，在shell终端中切换到Hexo目录，输入命令 hexo init

$ cd /work/Hexo
/work/Hexo $ hexo init
INFO Cloning hexo-starter to /work/Hexo
Cloning into '/work/Hexo'...
remote: Counting objects: 65, done.
remote: Total 65 (delta 0), reused 0 (delta 0), pack-reused 65
Unpacking objects: 100% (65/65), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into '/work/Hexo/themes/landscape'...
^Cwarning: Clone succeeded, but checkout failed.
You can inspect what was checked out with 'git status'
and retry the checkout with 'git checkout -f HEAD'

INFO See you again

初始化完成后Hexo的目录结构：

3. 获取博客主题

安装样式解析：npm install hexo-renderer-scss --save

$ npm install hexo-renderer-scss --save

> node-sass@4.9.3 install /Users/wang/HexoNew/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.3/darwin-x64-64_binding.node
Download complete ?? ? :
Binary saved to /Users/wang/HexoNew/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Caching binary to /Users/wang/.npm/node-sass/4.9.3/darwin-x64-64_binding.node

> node-sass@4.9.3 postinstall /Users/wang/HexoNew/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/wang/HexoNew/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Testing binary
Binary is fine
+ hexo-renderer-scss@1.2.0
added 187 packages from 167 contributors and audited 3576 packages in 24.221s
found 0 vulnerabilities

克隆主题：git clone https://gitee.com/xiuxiuing/hexo-theme-even themes/even

/work/Hexo $ git clone https://gitee.com/xiuxiuing/hexo-theme-even themes/even
Cloning into 'themes/even'...
remote: Counting objects: 136, done.
remote: Compressing objects: 100% (123/123), done.
remote: Total 136 (delta 4), reused 128 (delta 2)
Receiving objects: 100% (136/136), 264.27 KiB | 556.00 KiB/s, done.
Resolving deltas: 100% (4/4), done.

克隆完成后，在/Hexo/themes目录下，可以看到 landscape和even 两个文件夹。

我们所要使用的主题都是放在这个目录下，Hexo默认使用的是landscape主题，由于第二步Hexo初始化时主题没有clone成功，所以我们这一步克隆了even主题，接下来会使用even主题进行演示。

想获取更多主题，可在网站：https://hexo.io/themes/ 选择自己喜欢的主题，按照此步的步骤clone下来。

4. _config.yml对博客进行基础配置

_config.yml文件修改，保存

5. 本地预览博客

编译项目，输入命令：hexo g运行项目，输入命令：hexo s

$ hexo g
INFO Start processing
INFO Files loaded in 186 ms
INFO Generated: archives/2018/08/index.html
INFO Generated: archives/index.html
INFO Generated: archives/2018/index.html
INFO Generated: index.html
INFO Generated: 2018/08/08/hello-world/index.html
INFO 5 files generated in 242 ms
$ hexo s
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在浏览器中输入http://localhost:4000/`就可以看到效果啦

部署博客到Gitee上

1. 创建Gitee账号

到码云：https://gitee.com/ 上申请注册账号，码云类似国内版的GitHub，所以操作界面跟GitHub差不多，多了一些国产化的东西，这里不做更多介绍了，自己研究下。

2. 创建项目

创建完成后，在项目中复制项目地址。

3. 在_config.yml中配置Git

deploy:
type: git
repo: https://gitee.com/xiuxiuing/blog.git
branch: master

注意：冒号后面一定要有空格，否则不能正确识别。

4. 发布到Gitee

输入命令npm install hexo-deployer-git --save 安装自动部署发布工具

输入命令hexo clean && hexo g && hexo d 发布博客，首次发布需要在shell中输入账号和密码。

5. Gitee Pages设置

在项目的服务中选择Pages选项

选择 master分支，点击 部署/更新

稍等一会儿博客就发布成功啦，访问博客地址：https://xiuxiuing.gitee.io/blog，就可预览在线博客啦！！！

如果博客的样式不对，则需要在_config.yml中配置下博客地址和路径：

url: https://xiuxiuing.gitee.io/blog/
root: /blog

再执行命令hexo clean && hexo g && hexo d 就可以啦。

至此，我们的博客就搭建完成。

在/Hexo/source/_posts目录下就可以写我们的博客。

已经成功在Gitee上搭建完成了自己的博客，但是这个博客还是比较简陋的。

接下来讲介绍 如何开始写作 和 Even主题的常用配置 。

如何开始写作

博客搭建完成，虽然功能很简单，但是已经可以开始写作。

新建文章

使用命令来新建一篇文章：

$ hexo new [layout] <title>

layout 是文章的布局，默认为post，可以先不写。

title 是文章的标题，也是文件的名字，存储在source/_posts下。

$ hexo new demo

则在source/_post目录下自动生成了demo.md文件

使用MarkDown编辑器打开文件就可以开始写作了。

Front-matter 设置

Front-matter 是文章最上方以 — 分隔的区域，用于指定文章的变量设置，举例来说：

title: demo
date: 2018-08-23 15:13:30
tags:
---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

文章分类和标签

只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。在demo.md增加如下设置，示例：

categories:
- Demo
tags:
- 示例

则会在博客的标签和分类下分别增加我们的配置效果：

标签配置效果：

分类配置效果：

说明：文章分类和标签的设置，会自动归档的菜单的分类和标签中。

文章截断

在文章内容中添加 <!-- more --> 即可在首页显示时只显示其之上的内容。

并且会在 <!-- more --> 添加一个 Read more 的链接。

如图：

自定义文章简述

可在文章头信息中添加 description 字段，并填写自定义的文章简述。

就可以在首页显示文章简述而不显示文章内容, 并自动添加阅读更多的跳转链接。

Even主题常用配置

我们博客搭建完成后Hexo的目录结构如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
├── themes
| ├── even
| └── landscape

我们Even主题的配置则主要在even目录下进行，配置文件_config.yml，目录结构如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── css
| └── js
├── languages
| ├── default.yml
| └── zh-cn.yml
|── layout

修改主题颜色

主题自带了 5 种可选的颜色：

修改主题配置文件中 theme 字段的 color 属性可改变主题色：

# ===========================================
# Theme Settings
# ===========================================
# theme styling
# color: Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violet
theme:
color: Default

除了能够修改为主题自带的 5 种颜色之外，还可以使用自定义的其他颜色。

在 source/css/_custom/_custom.scss 中添加样式变量 $theme-color 修改主题色。

$theme-color: #xxxxxx;

同时需要修改 $deputy-color 主题副颜色，该值主要使用在代码块背景以及文章目录。

$deputy-color: #xxxxxx;

_variables.scss 中的样式变量都可以在 _custom.scss 中进行覆盖，从而自定义主题样式。

添加分类页

使用命令新建一个 categories 页面：

hexo new page categories

编辑生成的 categories/index.md 文件，设置布局为 categories:

title: categories
layout: categories

默认开启评论（如果使用了多说或 Disqus），添加 comments 字段并设置为 false 可关闭。

在主题配置文件(_config.yml)中添加链接:

# ===========================================
# Menu Settings
# ===========================================
menu:
Home: /
Archives: /archives/
Categories: /categories/

添加标签页

使用命令新建一个 tags 页面：

hexo new page tags 

则会自动生成如下目录：

编辑生成的 tags/index.md 文件，设置布局为 tags:

title: tags
layout: tags

默认开启评论，添加 comments 字段并设置为 false 可关闭。

在主题配置文件(_config.yml)中添加链接:

# ===========================================
# Menu Settings
# ===========================================
menu:
Home: /
Archives: /archives/
Tags: /tags

添加自定义页面

使用命令新建一个自定义页面（以添加关于页为例）：

hexo new page about

则会自动生成如下目录：

编辑生成的 about/index.md 文件，设置布局为 page:

title: about
layout: page

关于页面的内容，个人相关介绍也是在此页面进行编辑。

# ===========================================
# Menu Settings
# ===========================================
menu:
Home: /
Archives: /archives/
About: /about

在使用的语言文件下添加对应的字段（默认为 languages/default.yml）:

menu:
home: Home
archives: Archives
tags: Tags
categories: Categories
about: About

发布博客后，在首页的菜单中就可以看到我们设置的标签 分类 关于菜单啦！！！

添加文章访问量统计

文章访问量 阅读次数 统计通过 LeadCloud 支持

配置LeanCloud

打开LeanCloud官网，进入注册页面注册。完成邮箱激活后，点击头像，进入控制台页面

创建新应用

创建一个新应用，并创建名称为 Counter 的 Class（注意权限选择无限制）

配置 app_id 与 app_key

在你所创建的应用的 设置->应用Key 中查看 app_id 与 app_key

修改主题配置文件 _config.yml，填入 app_id 与 app_key:

# LeanCloud
leancloud:
app_id:
app_key:

设置 Web 安全域名

在你所创建的应用的 设置->安全中心 中设置 Web 安全域名 添加你的域名到 Web 安全域名中（若本地服务也想看到访问量，添加 http://localhost:4000/）

添加博客流量分析

博客流量统计、访客地域分布、来源等数据统计通过 百度网站统计 支持

新增网站

打开百度网站统计页面，注册相关账号信息，进入到管理页面，点击新增网站，填入相关信息：

代码获取

在代码获取页面获取到新版统计代码示例：

<script>
var _hmt = _hmt || ;
(function {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6f2041754dc216e6973762726c19d178";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
});
</script>

其中的6f2041754dc216e6973762726c19d178类似我们百度统计分析的APPID。

配置百度统计APPID

修改主题配置文件 _config.yml，填入 APPID:

# Baidu Analytics
baidu_analytics: 6f2041754dc216e6973762726c19d178

配置完成后执行hexo -g hexo -d编译发布我们的博客。

可以在百度统计分析的代码安装检查页面，点击检查，判断我们的百度分析是否添加成功。

添加成功后，差不多20分钟后就可以看到百度统计后台的数据了.

设置文章打赏

通过主题配置文件中的 reward 字段开启/关闭：

reward:
enable: true
qrCode:
wechat: /image/reward/wechat.png
alipay: /image/reward/alipay.png

支持微信以及支付宝，修改 qrCode 下对应的二维码图片链接，也可以直接设置成图片的网络链接。

当开启打赏功能时，可通过文章 Markdown 头部:

reward: false

关闭该篇文章的打赏。反之，当打赏功能关闭时，可以在文章中单独开启。

设置底部社交链接

目前支持：Email, Stack Overflow, Twitter, Facebook, Github, 微博以及知乎

修改主题配置文件中的 social 字段下的各个字段开启，为空时即为关闭：

social:
email: your@email.com
stack-overflow:
twitter:
facebook:
github:
weibo:
zhihu:

主题使用的是自定义的 iconfont 图标库。

设置文章版权

修改主题配置文件中的 copyright 字段开启/关闭：

copyright:
enable: true
# https://creativecommons.org/
license: '本文采用<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可'

默认显示作者，来源，链接以及版权说明，版权说明可通过 copyright.lincese 自定义。

copyright.license 的值可以是 HTML

当文章版权信息开启时，可通过文章 Markdown 头部：

copyright: false

进行单篇文章版权信息的关闭。

个人博客效果参考：https://xiuxiuing.gitee.io/blog/