GitHub+hexo搭建个人博客

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

1. 前言

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

朱酱酱的博客 ： 链接

2. 概念介绍

Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
Hexo是一个基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Heroku上，是搭建博客的首选框架。我这里选的是GitHub。Hexo的作者是台湾的，对中文支持很友好，可以到 Hexo官网 了解更多细节。

GitHub

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

GitHub Pages

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

3. 搭建步骤

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

环境搭建

安装git

git下载

对应下载自己的电脑系统即可

安装nodejs

Hexo基于Node.js，我们需要在本机安装Node.js

nodejs下载

安装完成后需要检查是否正确安装：以下都需要检查

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

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

安装Hexo

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

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

npm install -g hexo-cli

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

hexo init

注意，这些命令都作用于我们刚刚新建的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 //部署

推送网站

​ 上面我们只是在本地预览，接下来要做的就是推送网站，也就是发布网站，让我们的网站在互联网上能被访问到。在设置之前，我们先来看看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 //部署

​ 完成后打开浏览器，在地址栏输入你的放置个人网站的仓库路径，即xxxx.github.io，其中xxxx表示我们的用户名。当然这里有个前提，你是按照用户名.github.io的形式来命名你的仓库。你就会发现你的博客已经上线了，可以在网络上被访问了。

绑定域名（可选）

​ 虽然在Internet上可以访问我们的网站，但是网址是GitHub提供的:xxxx.github.io， 而我们想使用我们自己的个性化域名，这就需要绑定我们自己的域名。

​ 这里演示的是在阿里云万网的域名绑定，在国内主流的域名代理厂商也就阿里云和腾讯云。登录到阿里云，进入管理控制台的域名列表，找到你的个性化域名，进入解析

然后添加解析：如图选择解析就好

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

第二步：登陆你的github，在对应仓库的settings中把你在阿里云买的域名写上

点击save保存。

第三步：

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

​

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

hexo clean
hexo g
hexo d

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

主题和个性化设置

更换主题

​ 如果你不喜欢Hexo默认的主题，可以更换不同的主题，

​ 主题传送门：Themes

​ 个人使用的主题:传送门

​ 附送一款热度最高的主题next:传送门

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

$ git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer

​ 打开站点的_config.yml配置文件，修改主题为ayer:

图床选择

​ 我使用的markdown编辑器是Typora，这款编辑器插入图片需要绝对路径或者相对路径

​ 因为图片放在github上会加载不出来，所以使用了阿里云OSS和PicGO配合使用

PicGo

​ 这款软件是国人做的，非常好用的一款上传图片到云端的软件

​ PicGo下载链接

配置如下图：

上图的key和secret是阿里云oss的配置；接下来将进行介绍

阿里云OSS

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

建议还是花点钱弄个付费的，也不贵。我选择的是 阿里云OSS ，很便宜，九块钱一年，超出按留流量收费。

另外还有一款超级好用的图床上传工具：PicGo ，真的是十分好用了。

当然还有很多其他好用的图床，阿里云和腾讯云都差不多，SM.MS 等也还可以，总之我觉得收费的省心一些，当然你也可以说：“我不要你觉得，我要我觉得”，哈哈。

阿里云OSS

首先去购买 阿里云OSS

然后按照下图创建bucket:

如果上述情况有不懂的地方，可以参照下面这个链接，很详细的

https://blog.csdn.net/qq_40241957/article/details/89490282

其他

其他

我踩过的坑

​ 1、域名买.top的就可以，土豪请随意

​ 2、修改配置文件，很容易搞错路径，因为这个站点内同名的文件在很多路径下都有，例如_config.yml

​ 3、如果安装hexo过程中或者之前有报错，建议你重装。一旦出错了，基本就是你的操作问题了，而且很难发现、解决，解决错误的时间可以重装很多次了

​ 4、域名的绑定，关于添加解析，很容易出错！！有的博主说是三条，有的博主说是只需要一条，就是不要A记录的解析，保留一个CNAME的解析，我是添加了三条的，如果你遇到什么问题，可以试试只保留CNAME，百度一下解决方案

Tips

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

到这里恭喜你成功的搭建好了自己的博客！！！

打赏