搭建自己的博客

搭建自己的博客

效果预览

我们每个人都想拥有自己的博客网站，那么问题来了，搭建一个博客需要什么呢？前后端加服务器。

那么问题又来了，前后端我不会啊，服务器我也没有。不用担心，前端我们是有模板的，需要实现自己的功能去模板当中修改即可，服务器我们可以选择Gitee或者GitHub的GitPages服务，帮我们部署我们的静态网站，对于我们的学习网站，不需要那么花哨，静态页面完全够用，所以后端的部分我们也可以省去，需要的数据放在前端整合为静态博客即可。

这是我的博客，我使用的是Github Pages服务，因为可以绑定自己的域名；没使用Gitee Pages服务，因为不能绑定自定义域名并且需要手动部署给我劝退了，虽然国内的访问速度确实快。

链接：https://lzx0626.me

Hexo框架简介

前端的模块，我选择的是Hexo框架，Hexo 就是一个专门用于博客类网站的开源项目，使用Node.js语言开发，现在网上大多数的个人博客都是使用这个框架搭建的。Hexo不仅搭建过程简单快捷，配置灵活，可定制型非常高，因此众多大佬开发者为它开发了丰富的主题库，而作为菜鸟我们只需要选择一个符合自己审美的主题直接用就行了，当然如果你懂前端和js，也可以自己修改定制，或者自己制作主题并分享到互联网上。

注意：以下的所有操作都是在Linux系统下完成的，Windows下同理即可。

Hexo依赖环境：node.js

这是它的官网：Node.js

由于我使用的是Linux系统，所以我们通过系统包安装命令就可以安装node.js，我的Linux发行版本是Ubuntu，所以我用apt包管理

sudo apt install node #node就是node.js的名称

完成后使用如下命令，如果出现预期的效果代表安装成功：

Hexo依赖环境：Git

作为码农，Git是什么应该不陌生，Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。简单理解就是下载代码的工具，因为Hexo是一个托管于GitHub上的开源项目，所以安装Hexo的时候需要使用Git来下载源码和依赖代码，而且后面要将自己的博客发布到GitHub pages或者Gitee pages上面也需要使用Git。

对于Linux系统而言，Git一般是自带的，如果没有，可以用如下命令安装：

sudo apt install git

安装完成之后同理可以查看版本检查是否安装成功。

至此，你可以进行后续的一系列Git操作了。

安装Hexo

完事具备，只欠东风，我们现在可以正式安装我们的hexo框架了。

我们在本地(我这里指的是Linux的目录里面)里创建一个空文件夹，里面存放hexo的文件和以后我们自己的博客文件，注意最好不要有中文路径，避免出现一些奇奇怪怪的问题。

在终端中进入这个文件夹，输入一下命令：

# 安装 hexo 框架
npm install -g hexo-cli
# 初始化文件夹
hexo init
# 安装 hexo 依赖包
npm install

可能遇到的问题

• 在这一步可能会出现一些问题，安装完成hexo框架之后可能系统会找不到hexo命令，例如：

  

  但是这个时候正常情况下我们的hexo框架是已经安装好了的，系统识别不到这个命令大概率是hexo没有被添加到环境变量里面，为了解决这个问题，我们在之后的hexo命令前面都加上npx，也就是：

  npx hexo ...
  

  解释一下，为啥要在前面加上npx。

  在大牛阮一峰的网络日志中，他是这么描述的：“npx 想要解决的主要问题，就是调用项目内部安装的模块”，所以可以理解为在命令行下调用，可以让项目内部安装的模块用起来更方便，npx运行的时候，会到node_modules/.bin路径和环境变量$PATH里面，检查命令是否存在，所以系统命令也可以调用，即上面的命令安装不成功的时候加上npx的话也许就可以成功了。

  这说的没毛病，如果我们单纯执行hexo，系统会去全局寻找该命令，由于我们可能是通过npm install安装（没有加-g参数）在本目录的node_modules中的，全局安装了也有可能失败，因此加上npx来帮忙查找，后续使用gulp压缩文件也是同样的道理。

  为了验证，我们还可以查看hexo的版本：

  可以看出我这里有权限的问题，所以以后的执行最好我们还是加上sudo或者切换成为root用户(sudo su)，为了方便，后续的命令当中我还是使用hexo，前面的修饰我就不加了

  

• hexo init会去GitHub上hexo的开源项目里面上拉取对应的到本地

  链接：https://github.com/hexojs/hexo-starter

  如果是因为用户权限问题报错，建议切换为root用户，但是这可能导致后后续文件编写的权限问题，但是这也是迫不得已的事情；如果是因为网络问题卡住，我们可以直接克隆这个仓库到本地，他和这个命令是等价的效果：

  git clone git@github.com:hexojs/hexo-starter.git
  

  克隆完成之后会得到类似于我的这一系列文件，当然我这里面多了一些文件，这是我自己添加的，有特别作用。

  

• npm install会在当前目录下安装hexo的依赖包，在上面的图中是node_modules文件夹，注意一定要在博客文件的根目录安装

npm换源

如果觉得觉得npm在国内下载的慢的话，可以使用镜像网站，这里推荐使用配套的cnpm命令代替npm命令以后

npm install -g cnpm -registry=https://registry.npm.taobao.org

这样以后，cnpm就安装好了，我们查看npm的版本

cnpm --version

可能得到如下的结果，这样就安装成功了，以后都是用cnpm命令代替npm即可

更换博客主题

hexo框架默认提供的博客主题是landscope，这个有点寒碜，我们当然可以选择自己喜欢的主题。

• 链接：https://hexo.io/themes

例如，我选择的就是主题stun，点击可以进入对应的GitHub链接。

下面以我的主题为例，来安装并且替换掉默认的主题

进入你的博客项目，也就是Hexo根目录

git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun

该指令会将本仓库中的所有文件克隆下来，其中有很多文件仅用于项目开发，对于普通用户来说完全用不到。因此，如果你想仅克隆主题运行所必需的文件，请用下面的指令代替上面的指令

git clone -b dist https://github.com/liuyib/hexo-theme-stun.git themes/stun

安装依赖hexo-renderer-pug(这个是GitHub上给的，不同的主题可能没有这一步，看各自的Git文档吧)

npm install hexo-renderer-pug --save 

这样以后，你会发现你的theme目录下多了stun的目录

然后打开项目根目录下的_config.yml文件，对主题参数进行修改

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: stun #请将这里改为你想要的主题名字

本地部署

做好这一切之后我们就可以本地部署了

我们需要部署整个项目，需要在终端执行如下命令

sudo npx hexo clean # 清理，只有清理需要加上sudo，其他的都不需要，别问，问就是我试验过了
npx hexo g # 生成
npx hexo s # 启动本地服务器

如果一切没有问题的话，终端应该会提示在4000端口开放了本地博客

• node_modules

  构建的过程中可能会报node_modules相关依赖的错误，例如

  

  这个时候我们根据建议运行命令安装依赖即可，必要时候加上sudo

  rm -rf node_modules && npm install --force
  

然后我们就能看到本地部署的博客页面了

关于主题的其他设置

这些可以参考主题的相关文档进行更多个性化的设置，这里略

• stun官方文档：快速开始 | hexo-theme-stun

Git Pages服务

本地部署的博客当然要上传到服务器才能被人们看到啊，可以部署到自己的服务器上

当然，抠门的我们肯定想白嫖啊，因此Git Pages服务就是不二的选择

我之前使用的是Gitee Pages服务，因为在国内访问的比较快，写这篇文章的时候我还没有购买域名，也就没有办法把GitHub上面的做CDN加速，所以还是用Gitee Pages服务好一点

• 12.23更新：我GitHub学生认证了，嫖了一年域名，所以换GitHub Pages了!!!

创建Gitee仓库

登录账号后，点击页面右上角的+，选择新建仓库

点击之后页面如下

• 仓库名称随意
• 路径这里建议填写你的用户名，这样生成出来的网页地址是比较纯净的形式，如https://<你的用户名>.gitee.io。当然也可以自定义名称，比如blog ，但是这样后面生成出来的网页地址会带一个子目录，像https://<你的用户名>.gitee.io/blog这样
• 介绍自己填
• 开源，记得一定开源!!!
• 初始化仓库，可以不用，就是添加个许可证，还有.gitignore这些，这个后面自己添加都可以
• 设置模板里面还是选一个README.md吧，一个仓库最好还是简单写一个说明文档吧，养成习惯
• 分支模型选择master即可，后面自己创建更多的分支即可

最后点击下面的创建即可

然后点击页面右上角的服务，选择Gitee Pages

勾选强制使用HTTPS，点击启动。

• 这个的部署分支就是你博客构建出来的文件存放的分支，我的是Site

部署到远端

现在我们只剩下最后一个问题，如何把本地构建出来的成品文件部署到远端，很简单，都在用Git了，直接传上去不就好了

• Tips：为什么这里我不像其他教程使用hexo d命令来部署，我们直接上传Git和使用hexo提供的命令是一样的，都是传到Git的分支，没有区别，但是我在配置hexo这个的时候碰到了很多问题，所以我就没用这个了

我们现在来看一下构建出来的文件在项目的哪里

这个public里面的文件就是构建出来的可以发布的成品，可以看到里面有一个主页面index.html，我们的npx clean其中删除的文件就有public目录

因此，后续就很简单了，只需要把public目录中的文件拷贝出来到我们需要部署的仓库或者分支覆盖掉然后上传到Git即可

关于Git的使用，本文不再赘述，可以参考我的其他文章或者自行搜索

具体可以参考我的仓库配置，链接：https://github.com/DavidingPlus/DavidingPlus.github.io

GitHub Pages服务

创建GitHub仓库

登录账号后，点击页面右上角的+，新建仓库

点击之后页面如下

• Repository name：你的名字.github.io，比如我的就是DavidingPlus.github.io
• public：开源，开源，开源!!!
• README，license，.gitignore，Description看自己需求来即可

完事之后点击Settings/pages选择你自己的分支和路径（一般就/root）部署就好了

和Gitee不同的是，GitHub传上去会自己自动部署相关分支，所以很方便

记得开启强制https

部署到远端

在Gitee Pages中，由于当时我的hexo d出现了问题，所以我是直接硬推的，现在我找到问题了，所以这里使用hexo d来进行部署

• tips：hexo的命令中，只有hexo clean前面建议加上sudo，因为清理可能需要root权限，其他命令一律不加，否则权限过高也可能会出现问题

找到项目根目录的_config.yml文件，找到如下

• type：git
• repo：你自己仓库的地址，可以是通过http，也可以是通过ssh，就是git clone后面跟着的那个
• branch：部署的分支，我给定的默认分支master，建议就用master，不然部署的时候可能会出现奇奇怪怪的问题
• message：git commit的信息
• ignore_hidden：下面写清楚了这个是干啥的

最后会在项目目录生成一个.deploy_git的目录，链接到你的仓库的部署分支，我的就是master

完整的部署命令

sudo npx hexo clean
npx hexo g
npx hexo d

可以参考我的仓库配置，链接：https://github.com/DavidingPlus/DavidingPlus.github.io

总结

通过以上，去搭建你自己的博客吧。当然如果是全栈大佬请当乐子看，你们应该有自己的更好的方式。

任何问题，可以在评论中提出或者联系我！