Web前端：hexo+github搭建个人博客，免费！

网上查的同类教程有不少，但是看了一下发布时间，那些教程的发布还是有些年头的了。
有些教程中的步骤现在不一定适用了，我当初就按照别人的教程搭建Hexo,不小心就掉了坑。
那就干脆自己写一个，方便记忆，顺便给需要的朋友提供参考。

首先报上一波，我开发的运行环境

运行环境 Runtime environment

1
2
3
4
5
6
操作系统 ： Windows10
IDE: JetBrains WebStorm 2018.2.1 x64
浏览器： Google Chrome 版本 67.0.3396.99（正式版本） （64 位）&& FireFox Developer Edition 版本63.0b4  (64位)
hexo: 3.7.1
hexo-cli: 1.1.0
node: 8.11.4

背景

个人博客，一般来说，基本都是咱们干IT的人用得多一些。
要是从事这行业之外的人，根本也不需要吧。QQ空间，微博，微信朋友圈之类的地方就基本能够满足需求了。
受到了知乎上，一个讨论的问题的启发。如何开始写技术博客，怎么选择？
所以打算自己搭建博客，自己用的东西，当然是讲究一个“顺自己心意”就好。
为了尽可能写得详细，所以教程显得很冗长，但是Hexo搭建博客真的很容易..

优势

为什么选择Hexo+Github来搭建自己的博客？
我认为有以下几点优势：

  1. 不需要服务器，Github免费提供的托管服务；
  2. 不需要域名，Github同样提供了一个.io的域名；
  3. 不用将太多的心思投入到博客开发；
  4. hexo主题多样且免费、又好看；
  5. 不像其他博客有让人心烦的广告；
  6. 便于维护更新，换风格直接换模板就行。

总体步骤概述

大体的就4个步骤，咱就不弄那么复杂了。

  1. 下载需要的工具，并安装；
  2. 创建Github仓库；
  3. 修改Hexo配置文件；
  4. 把博客部署到Github上；

搭建流程

准备阶段

  • 下载安装相关工具

1.下载NodeJs
点击此处NodeJs中文下载页根据自己的操作系统，下载对应版本的NodeJs。
这里是推荐使用长期维护版本（LTS）的NodeJs,
如果你看不懂，从我这里下载也一样，但是版本就可能不是最新的了，这里版本v8.12.0。
Windows系统：
64位：NodeJs_x64
32位：NodeJs_x86
Linux系统：（你都会Linux了，不会选不太可能吧？）
64位：NodeJs_x64
32位：NodeJs_x86
macOS系统：
没用过，不知道。

2.安装Git
点击Git根据自己的操作系统，下载对应版本的Git 。
如果你看不懂，从我这里下载也一样，但是版本就可能不是最新的了，这里版本v2.19.0。
Window系统：
64位：Git_x64
32位：git_x86
Linux系统：
详见安装命令

下载完成以后，打开根据提示操作，Win系统直接“下一步”就OK了。

3.测试安装是否已经生效
打开cmd命令行(win+r 输入cmd回车)分别执行（Linux系统则是在终端中）复制以下命令：


node -v
npm -v
git --version

回车，稍微等下便会有以下运行结果：

C:\Users\DeSireFire>node -v
v8.11.4

C:\Users\DeSireFire>npm -v
5.6.0

C:\Users\DeSireFire>git --version
git version 2.18.0.windows.1

说明安装成功了。

4.安装Hexo
之前做的，是为了安装Hexo做准备。

https://hexo.io/zh-cn/

从Hexo 官网中可以看到这些指令，咱就以人家官网的步骤行事准没错。
打开cmd命令行(win+r 输入cmd回车)分别执行（Linux系统则是在终端中），通过cd指令跳转到要存储Hexo的位置。
如果不想琢磨，我直接写完全部指令，路径我放在D盘上（以Windows系统为例）

d:
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

以上命令的意思是：

  1. 跳转到D盘
  2. 使用npm安装hexo
  3. 使用hexo初始化一个名为blog的项目
  4. 跳转到生成出的blog文件夹里
  5. hexo启动服务器
    如果没有出错，一般会是以下情景：
    INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
    此时访问Hexo测试服即可。如果出错请严格按照步骤检查！

打开浏览器输入 http://localhost:4000 就能看到搭建好的Hexo本地博客了。
不过因为没有使用其他主题，所以Hexo会是用自带的默认Blog主题。
测试完毕记得在命令窗口上按 Ctrl+C 关闭hexo服务器。

  • 创建Github仓库

注意：

1.在这里，我的做法是创建两个仓库！
2.一个仓库用于存放hexo的配置文件；
3.另一个仓库用于部署Blog的静态文件！

  1. 点击Github进入Github,登陆！（如果没有账号，自行百度一下注册方法）
  2. 依照图中的位置创建仓库，如图所示：
    创建仓库
  3. 在Repository name中输入你要创建的仓库名字，这里我命名为“myhexo”,在Description输入仓库的描述，如图：
    仓库命名
  4. 其他的，根据自己需要来设定。最后单击Create repository来完成最后确定创建。
  5. 再创建第二个仓库，重复以上1~4的步骤，这一次在Repository name中输入dafanshu.github.io（xxx为你的想起的博客名，自行修改,但是必须与你的github用户名一致！）

完成以上五步，那么在你的github首页就能看到这两个仓库了。如图：
仓库列表
以“.github.io”结尾的为博客仓库，另一个是hexo配置文件仓库。

  • 美化Hexo主题（拓展）
    点击按钮访问Hexo主题搜索，在里面随便挑。
    主题搜索
    一般主题的开发者都会在其仓库下方放上主题效果的预览图。
    这里，作为举例，选择了 https://github.com/litten/hexo-theme-yilia 主题。
    下载方法，如图所示：
    主题下载
    下载完成后，解压得到一个名为“hexo-theme-yilia-master”的文件夹，这里我把它改名为“yilia”。
    最后，把它复制到D:\Blog\themes\文件夹下，主题安装就此完成。
    配置文件方面，之后会讲到。

使用阶段

下载、安装完相关工具，创建完相应的两个仓库，那么就开始进入重要的阶段。

修改Hexo配置文件

1.打开blog/_config.yml，参考实例进行修改

# Site
title: 网站标题
subtitle: 副标题
description: 个人签名
author: 姓名
language: zh-Hans
timezone:

需要注意的是：

  1. 所有的配置“:”符号后面都要带空格，否则失效。
  2. language是设置语言。zh-Hans是中文，若出现乱码需转码UTF8。

2.配置发布blog的仓库地址
如何获得github的地址呢？如图：
部署发布仓库

注意，这里提到的仓库是用以“.github.io”结尾的用于部署Blog的仓库

将图中选中的部分复制下来，然后如示例中，写入_config.yml

deploy:
  type: git
  repo: https://github.com/DeSireFire/DeSireFire.github.io.git
  branch: master

以上这步非常重要，它关系到你最终能不能部署成功！

内容较多建议参考官方文档
https://hexo.io/zh-cn/docs/configuration.html
修改完之后，可以重新执行hexo s在浏览器查看效果。并确认无误，包括以后需要添加文章，或者更新主题等，都建议先在本地查看无误再远程部署。
根_config.yml文件中。

3.配置主题到配置文件

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yilia

需要注意的是：

  1. theme名必须与D:\Blog\themes\下的文件夹名一致。

4.配置用于存放hexo文件的仓库地址
首先，进入Github,找到之前创建来用于存放hexo的配置文件的仓库“myhexo”，如图：
部署配置仓库
复制仓库地址，然后在D:\Blog\目录下，然后如图中打开gitbash（如果你是Linux系统，直接在相应目录下打开终端即可）：
gitbash
在之后出现的黑窗口中输入一下命令，注意根据自己的需要修改部分命令内容：

npm install hexo-deployer-git --save

git init

git config --global user.name "你的github用户名"
git config --global user.email [email protected]（你的邮箱地址）

git add *
git commit -m "提交hexo配置文件到仓库"
git remote add origin (此处加上你的仓库地址，如我的是：https://github.com/DeSireFire/DeSireFire-sHexoWarehouse.git)
git push -u origin master

回车搞定，你的Hexo文件就上传到配置仓库去了！

本地测试Hexo是否生效

一切顺利，下一步就可以愉快写博客了。
打开cmd命令行(win+r 输入cmd回车)分别执行（Linux系统则是在终端中），
如果不想琢磨，我直接写完全部指令，路径我放在D盘上（以Windows系统为例）

cd d:\blog\
d:
hexo clean&&hexo g&&hexo server

如果没有出错，一般会是以下情景：

INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

打开浏览器输入 http://localhost:4000 就能看到搭建好的Hexo本地博客了。
不过因为没有使用其他主题，所以Hexo会是用自带的默认Blog主题。
测试完毕记得在命令窗口上按 Ctrl+C 关闭hexo服务器。

部署Blog到外网

完成前面的工作，说明你离成功就只剩下最后一道命令了。
继续在本目录命令行，执行！

.hexo clean&&hexo g&&hexo d

提示上传完成以后，访问Github。打开之间说到以“.github.io”结尾的用于部署Blog的仓库。
打开该数据库的设置页面，如图：
reposetting
在设置页面中，向下滚动到GitHub Pages一栏，如图：
GitHub Pages
刚刚上传完成时，github需要一点时间才能把blog发布到外网上，耐心等待一首歌的时间基本就OK了。
当github发布完成，会显示“Your site is published at XXXX”，
这时候访问箭头所指的位置，就能直接看到自己的博客了。

最后一项拓展：
如果你有自己购买的域名，可以在第三个箭头处的位置输入保存。这样就能用自己自定义的域名来访问博客了。

总结

到此，整个Hexo+Github搭建个人博客的教程就完成了！有没有很开心！如果有不会的地方可以直接留言提问2333！

赏

×

也就放着玩的

扫码支持
扫码打赏，其实感觉也没人会给的。。

打开支付宝扫一扫，即可进行扫码打赏哦

本文标题:Web前端：hexo+github搭建个人博客，免费！

文章作者:RaXianch

发布时间:2018年09月12日 - 21时26分

最后更新:2019年12月17日 - 10时44分

原始链接:https://blog.raxianch.moe/oldBlog/2018/09/12/Web前端：hexo-github搭建个人博客，免费！/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 运行环境 Runtime environment
  • 背景
    1. 优势
    2. 总体步骤概述
  • 搭建流程
    1. 准备阶段
    2. 使用阶段
      1. 修改Hexo配置文件
      2. 本地测试Hexo是否生效
      3. 部署Blog到外网
  • 总结
    • ,