GitHub+hexo搭建个人博客详细教程

原文链接 ：

GitHub+hexo搭建个人博客详细教程

前言

随着互联网浪潮的翻腾，国内外涌现出越来越多优秀的社交信息分享者，随之优秀的信息分享平台也越来越多，最常见的就是个人博客。GitHub + hexo 是比较受欢迎的一种方式，为什么呢？省钱、简单、快速。如果你也是一个不甘寂寞、喜欢折腾的程序猿（媛），如果你也有过这种想要搭建一个所以自己的博客网站的想法，可以跟着我这篇教程博客一起，它可以让你快速搭建起一个属于自己的个人博客，享受这种从0到1的过程。

概念介绍

Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用

Markdown

（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

Hexo是一个基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Heroku上，是搭建博客的首选框架。我这里选的是GitHub。Hexo的作者是台湾的，对中文支持很友好，可以到

Hexo官网

了解更多细节。

GitHub

GitHub是一个代码托管网站和社交编程网站。这里聚集了世界上各路技术牛叉的大牛，和最优秀的代码库。是全球程序员的天堂。因为是国外的，所以界面全是英文。

GitHub Pages

GitHub Pages是用来托管 GitHub 上静态网页的免费站点。

Coding Pages

和GithubPages功能相同，其对应的Coding平台也可以实现和Github相似的功能。但没有后者那么出名。是香港的公司，也是国内的。部署在codingpages上，在国内访问，速度会快很多。部署在coding上，可以自行查找教程，我这篇博客主讲利用 GitHub 搭建。

看了这些概念，我相信你一定还是一脸懵逼的。但你可以简单理解成下边的的一段话：

利用Hexo和GithubPages/CodingPages搭建博客，实际上就是利用Hexo在本地（你的电脑上）生成一个博客站点，然后利用网络将它传输到Github/Coding上进行拷贝和备份。再由Github和Coding提供的GithubPages/CodingPages服务将博客部署到网上，这样你的博客就可以作为一个独立的站点被别人浏览（正式上线）。同时你也可以在Github和Coding上管理你的博客。

这是我博客的效果：


Nine’s Blog

下面正式开始，从零开始搭建属于个人博客。

搭建步骤

• 环境搭建
  • 安装git
  • 安装node.js
  • 安装Hexo
• 获取个人网站域名
• GitHub创建个人仓库
• 推送网站
• 绑定域名
• 主题及个性化设置
• 发布文章
• 图床选择
• 其他

环境搭建

安装Git

git是一个开源的分布式版本控制系统，用于敏捷高效地处理项目。我们这里需要利用git将我们搭建好的网站推送到

github

上。git安装教程看我的另一篇博客：git安装详细教程（暂未写）。也可以到csdn等技术交流平台上寻找教程。

安装Node.js

Hexo基于Node.js，我们需要在本机安装Node.js，下载地址：

Download|Node.js

我下载的是node-v10.16.2-x64.msi，下载好之后一路默认安装next就好。注意安装Node.js包括node.js的环境变量配置以及npm的安装。

检查Node.js是否安装成功，打开命令窗口，输入

node -v


检查npm是否安装成功，在命令窗口输入

npm -v


到这里，Hexo的环境就已经全部搭建好了。

安装Hexo

安装hexo

hexo就是我们用于搭建个人博客的框架，这个时候我们需要在我们本地文件夹中创建一个用于博客管理的文件夹，我命名为Blog。hexo框架与以后写作发布的网页等都会保存在这个文件夹中，创建好之后进入文件夹，按住shift，然后鼠标右键-在此处打开命令行

使用npm命令安装Hexo，输入：

npm install -g hexo-cli

耐心等待安装完成，完成之后，初始化我们的博客，输入：

hexo init bolg

注意，这些命令都作用于我们刚刚新建的Blog文件夹中。

此时我们检测一下我们网站的雏形，按顺序输入以下三条命令：

hexo new hello Hexo    //新建一篇名为"hello Hexo"的博客
hexo g                 //生成静态文件
hexo s                 //本地部署预览

此时，我们的网站已经初步成型，可以输入

localhost:4000

访问。

我的blog修改过配置，和你们新搭建的略有区别。

hexo常用命令

初始化命令

npm install hexo -g //安装Hexo
npm update hexo -g //升级 
hexo init //初始化博客

命令简写

hexo n "我的博客" = hexo new "我的博客" //新建文章
hexo g = hexo generate //生成
hexo s = hexo server //启动服务预览
hexo d = hexo deploy //部署

其他命令

hexo server //Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s //静态模式
hexo server -p 5000 //更改端口
hexo server -i 192.168.1.1 //自定义 IP
hexo clean //清除缓存，若是网页正常情况下可以忽略这条命令

推送网站

配置文件介绍

上面我们只是在本地预览，接下来要做的就是推送网站，也就是发布网站，让我们的网站在互联网上能被访问到。在设置之前，我们先来看看blog根目录里的**_config.yml文件**，是我们的

站点配置文件

，如下图：

进入根目录的themes文件夹的任意主题目录，也有一个_config.yml文件，这个是主题配置文件，如下图：

将hexo与gitHub关联

打开blog根目录下的站点配置配置文件_config.yml，修改成下面的样子并保存

这一步其实就是给

hexo d

这个部署命令做相应的配置，让hexo知道你要把blog部署到哪，很显然我们是部署到github仓库里。

然后我们要安装git部署插件，输入以下命令：

npm install hexo-deployer-git --save

然后我们在输入三条命令：

hexo clean //清理静态文件
hexo g //生成静态文件
hexo d //部署

这三条是我们日后写博客经常要用到的命令，其中第三条的 hexo d 就是部署网站命令，d是deploy的缩写，对应到我们刚刚在站点配置文件中的修改。

完成后打开浏览器，在地址栏输入你的放置个人网站的仓库路径，即xxxx.github.io，其中xxxx表示我们的用户名。当然这里有个前提，你是按照

用户名

.github.io的形式来命名你的仓库。

你就会发现你的博客已经上线了，可以在网络上被访问了。

绑定域名

虽然在Internet上可以访问我们的网站，但是网址是GitHub提供的:xxxx.github.io， 而我们想使用我们自己的个性化域名，这就需要绑定我们自己的域名。这里演示的是在阿里云万网的域名绑定，在国内主流的域名代理厂商也就阿里云和腾讯云。登录到阿里云，进入管理控制台的域名列表，找到你的个性化域名，进入解析

然后添加解析

包括添加三条解析记录，192.30.252.153是GitHub的地址，你也可以ping你的 xxxx.github.io 的ip地址，填入进去。第三个记录类型是CNAME，CNAME的记录值是：你的用户名.github.io这里千万别弄错了。

第二步，登录GitHub，进入之前创建的仓库，点击settings，设置Custom domain，输入你的域名

点击save保存。

第三步，进入本地博客文件夹 ，进入blog/source目录下，创建一个记事本文件，输入你的域名，对，只要写进你自己的域名即可。如果带有www，那么以后访问的时候必须带有www完整的域名才可以访问，但如果不带有www，以后访问的时候带不带www都可以访问。所以建议，不要带有www：

完成这三步，进入blog目录中，按住shift键右击打开命令行，依次输入：

hexo clean
hexo g
hexo d

这时候打开浏览器在地址栏输入你的个性化域名将会直接进入你自己搭建的网站。

主题及个性化设置

更换主题

如果你不喜欢Hexo默认的主题，可以更换不同的主题，主题传送门：

Themes

我自己使用的是Next主题，可以在blog目录中的themes文件夹中查看你自己主题是什么。现在把默认主题更改成Next主题，在blog目录中（就是命令行的位置处于blog目录）打开命令行输入：

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

这是将Next主题下载到blog目录的themes主题下的next文件夹中。

打开

站点

的_config.yml配置文件，修改主题为next:

打开

主题

的_config.yml配置文件，不是站点主题文件，找到Scheme Settings

next主题有三个样式，我用的是Gemini，你们可以自己试试看，选择你自己喜欢的样式（只需要把行首的#去除，#是注释），选择好后，再次部署网站，hexo g、hexo d，查看效果。选择其他主题，按照上述过程即可实现。

个性化设置

如果你没有用next主题，那么以下个性化设置就不用看了。因为它们都是next的配置。

关于next主题的配置，可以参考它的官方文档：

next官方文档

关于其他的个性化设置，我的博客所有的个性化都来自这些连接：

1. 
   RSS和High特效
   
2. 这篇真的厉害了，有30种特效：
   
   hexo的next主题个性化教程:打造炫酷网站
   
3. 主讲第3方服务：
   
   配置第三方服务
   
4. 创建一个菜单页面作为文章目录：
   
   hexo下新建页面下如何放多个文章
   
5. 博客加密：
   
   加密插件Github，issue里有解决next主题兼容的方法
   
6. 版权声明：
   
   Hexo博客NexT主题美化之自定义文章底部版权声明
   
7. SEO优化：
   
   Hexo NexT 主题SEO优化指南
   
8. 评论系统：
   
   hexo+next使用Valine评论系统
   
9. 插件库：
   
   Hexo插件
   

图床选择

关于图床，免费的图床有很多，但是免费的图床总会有很多问题，例如图片链接经常会失效等。

我这里也推荐一个还算好用的免费图床：

聚合图床

建议还是花点钱弄个付费的，也不贵。我选择的是

阿里云OSS

，很便宜，九块钱一年，超出按留流量收费。

另外还有一款超级好用的图床上传工具：

PicGo

，真的是十分好用了。

当然还有很多其他好用的图床，阿里云和腾讯云都差不多，

SM.MS

等也还可以，总之我觉得收费的省心一些，当然你也可以说：“我不要你觉得，我要我觉得”，哈哈。

其他

我踩过的坑

1. 域名买.top的就可以，土豪请随意
2. 修改配置文件，很容易搞错路径，因为这个站点内同名的文件在很多路径下都有，例如_config.yml
3. 如果安装hexo过程中或者之前有报错，建议你重装。一旦出错了，基本就是你的操作问题了，而且很难发现、解决，解决错误的时间可以重装很多次了
4. 域名的绑定，关于添加解析，很容易出错！！有的博主说是三条，有的博主说是只需要一条，就是不要A记录的解析，保留一个CNAME的解析，我是添加了三条的，如果你遇到什么问题，可以试试只保留CNAME，百度一下解决方案

我的建议

1. 个性固然好，但是在设置的时候一定要细心，这些都是要打开代码文件去修改的，如果本机装有IDEA，最好用它来编辑，没装的话IDEA的话，VSCODE也行
2. 图床选择要谨慎，建议选择知名图床，有很小的图床经常会失效，另外图片文件一定要在本地留有备份
3. 个性化可以让你的博客看起来高大上许多，但最重要的还是我们持续的价值输出，坚持写博客才是真理，不要忘记我们搭建博客的初心（当我知道很多小伙伴和我一样，就是喜欢折腾，哈哈）
4. 博客的源文件，也可以托管到github上，特别是博文对应得md文件，一定别弄丢了，整个站点文件都托管的话，可以多台电脑去管理你的博客
5. 国内访问GitHub得速度不理想，可以将博客同时部署到GitHub和coding，提高国内访问速度