零元搭建自己的博客

第一步:安装Git

进入Git官网,下载和自己电脑系统对应的版本进行安装

1-1

下载完成后开始安装,点击【下一步】

1-2

修改一下安装路径，然后点击【下一步】，如果自己C盘够用也可以直接安装

1-3

然后一直点击【下一步】，直到安装完成

1-4

安装完成后在电脑桌面上右键出现 【Git GUI Here】和【Git Bash Here】这两个选项就是安装成功了

1-5

右键，选择【Git Bash Here】打开终端，输入以下命令

1
2
git config --global user.name "用户名"
git config --global user.email "邮箱"

1-6

第二步:安装NodeJS

进入NodeJS官网下载和自己系统对应的安装包直接安装

2-1

下载完成后打开安装，点击【下一步】

2-2

勾选同意协议选项，点击【下一步】

2-3

可以修改安装路径，如果C盘够大可以直接点击【下一步】

2-4

一直点击【下一步】，直到安装完成

2-5

打开CMD窗口，执行node -v命令查看版本，能成功执行就说明安装成功了

2-6

在安装node的时候npm同时也安装上了，执行npm -v查看npm版本，能成功执行说明安装成功

2-7

下面就是修改全局包配置，不上必须的，可以不用修改

下载全局包是，默认保存在C盘下，我不想要全局包保存在C盘下，所以我需要修改一下

首先在安装目录创建两个文件夹，node_global文件夹用于存放全局包，node_cache是node的缓存

2-8

在cmd中执行下面两行命令，注意自己刚刚创建的文件夹的路径和命令中的对不对，不对的自己改一下

1
2
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

2-9

然后修改电脑变量，首先在桌面上【右键】此电脑，打开【属性】

2-10

点击【高级系统设置】

2-11

点击【环境变量】

2-12

选中用户变量中的【Path】变量，然后点击【编辑】

2-13

点击【新建】，填写node_global文件夹的路径

2-14

在系统变量中【新建】NODE_PATH变量，变量的值为node_global文件夹的路径加node_modules，全部新建好了之后点击确定进行保存

2-15

第三步:创建Github代码仓库

进入GitHub，点击头像，选着【Your repositories】进入仓库页面

3-1

点击【New】按钮新建仓库

3-2

新建的仓库名格式为github用户名.github.io

3-3

点击 【creating a new file】新建一个文件

3-4

新建的文件名为：index.html,内容随便写

3-5

新建完成后点击【Commit new file】保存

3-6

最后在浏览器中输入网址：https://用户名.github.io，如果可以成功访问到刚刚创建的文件就是成功了，如果访问不到可能就是在创建仓库的时候名称弄错了或者

是网址弄错了，也还有可能是创建文件的时候文件名搞错了。

第四步:安装Hexo

直接打开cmd窗口输入下面命令开始安装Hexo

1
npm install -g hexo-cli

4-1

如果出现下面这种报错就用管理员方式打开CMD窗口在进行安装

4-2

安装完成后输入hexo -v查看版本，如果可以查看到版本就是安装成功了

4-3

在随便一个盘创建一个空的文件夹，需要自己可以找到的地方就饿可以，文件夹的名称最好是英文的

4-4

在CMD窗口中切换到刚刚创建的文件夹

4-5

输入以下命令创建一个项目并且初始化

1
2
3
hexo init hexo-blog
cd hexo-blog
npm install

4-6

输入以下命令进行本地启动

1
2
hexo g
hexo server

4-7

在浏览器中访问http://localhost:4000，可以看到默认的主题就成功了

4-8

第五步:更换主题

嫌弃默认的主题太难看了，那么可以自己更换，免费的主题在谷歌和Github上都有人分享的，找到自己喜欢的主题，下载下来，我这里使用的是fluid这个主题，这

个主题在Github上开源的，进入主题的代码仓库，点击最新版进行下载。

主题地址：https://github.com/fluid-dev/hexo-theme-fluid

5-1

下载完成后解压文件，并且把解压出来的文件夹重命名为fluid，然后复制到项目下面的themes文件夹里面

5-2

找到刚刚创建的项目下的_config.yml文件

5-3

打开文件进行修改，如果没有代码编辑软件的可以直接用记事本修改，需要修改theme: landscape和language: en

把theme: landscape修改成theme: fluid，这个代码是控制使用的主题的

5-4

把language: en修改成language: zh-CN，这个是语言，默认的英文

5-5

修改完成后保存，这个主题默认是没有【关于】页面的，需要手动创建的，在CMD窗口中输入下面的命令进行【关于】页面的创建

1
hexo new page about

5-6

使用下面命令进行本地启动，然后在到http://localhost:4000去预览

1
2
hexo g -d
hexo s

5-8

第六步:创建文章

先修改博客目录下的_config.yml文件，把post_asset_folder: false改成post_asset_folder: true，这个配置是为了在生成文章的时候生成一个和文章名称相同的文件夹用于存储文章中的图片等。

6-1

创建文章的命令为：hexo new post 文章名称

执行下面这个命令创建一个测试文章

1
hexo new post 测试文章

6-2

执行完命令后我们就可以在source_posts目录下看到刚刚创建的文章和一个同名的文件夹

6-3

往文件夹里面丢一张图片

6-4

打开测试文章.md文件，然后开始编辑，这里就说一下图片的引用，具体的MD语法这里就不说了

6-5

再次执行下面命令进行本地启动

1
2
hexo g -d
hexo s

6-6

在浏览器中访问http://localhost:4000，可以看到刚刚添加的文章了

6-7

第七步:个性化页面

修改浏览器tab页面名称

打开博客目录下的_config.yml文件，修改里面的title字段

7-1

修改博客标题

打开博客目录下的themes\fluid下的_config.yml，修改blog_title字段

7-2

修改主页中间的的文字

打开博客目录下的 themes\fluid 下 _config.yml 中的 text 字段。

7-3

修改完成之后我们在本地启动一次就可以看到修改后的效果了

7-4

第八步:添加阅读量统计

需要添加阅读量统计的话需要借助别的服务来添加的，如果不想添加的话可以跳过这个步骤

申请LeanCloud账号并创建应用

进入LeanCloud官网进行注册
LeanCloud官网：https://console.leancloud.cn/apps

8-1

注册完成后登录进去进行实名认证

8-2

验证邮箱

8-3

验证邮箱完成后点击网站的LOGO回到主页，然后点击【创建应用】，应用名称根据自己喜好来填，选择【开发版】，然后点【创建】

8-4

打开应用的设置，找到【应用凭证】，找到之后记录下来AppID 和 AppKey，这个后面需要用到的

8-5

打开打开主题目录 themes\fluid下的 _config.yml 文件，然后打开统计开关

8-6

配置leancloud的app_id和app_key

8-7

打开计数功能，统计来源改为 leancloud

8-8

页面底部展示网站的 PV、UV 统计数

8-9

本地启动后预览看看

8-10

8-10-1

第九步:添加评论功能

打开主题目录 themes\fluid下的 _config.yml 文件，找到评论插件，修改以下配置

9-1

配置 LeanCloud 的 appId 和 appkey

9-2

重新部署后就可以看到评论功能已经打开了

9-3

第十步:部署到Github

先使用下面命令安装hexo-deployer-git

1
npm install hexo-deployer-git --save

10-1

修改博客更目录下的_config.yml

10-2

token是需要在Github上创建的，创建方式如图

10-3

最后就是部署到Githun上，用下面命令部署

1
hexo g -d

部署成功过后就可以访问了

10-4

结尾彩蛋

技术共享
博客

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！