不花钱，用一个小时搭建自己的博客网站

点击关注强哥，查看更多精彩文章呀

不知道大家平常有没有写博客的习惯，一般写博客都会记录什么？都会在哪里写自己的博客呢？

强哥平常就有写博客的习惯，不过没有强制自己多久写一篇，一般都是工作中遇到问题解决问题了会写篇博客分享一下。

前前后后，在CSDN上总共也写了217篇博客了，原创87篇。最新的总排名有排到了3823名。

哈哈，虽然自己也没有特殊的去整理自己的博客，没有系列总结系列文章，不过能够通过平常的总结分享帮助到大家自己也就挺高兴了。

但是话说回来，强哥最近也觉得，总是在博客平台上写文章，一直都没有一个归属于自己的博客网站，总是有点不够高端大气上档次。于是，前些天，就花了点时间，用Hexo在Gitee上整了一个自己的博客网站：Hexo。选了自己喜欢的主题搭建完后，是这样色儿的：

哈哈，不知道大家觉得怎么样，不过这个主题确实就是我喜欢的风格：简单直白，不花里胡哨，最重要的是一目了然。

话不多说，如果你也被上面的博客网站打动的话，就赶紧行动起来。重点是一毛钱不花，按着教程走，一个小时左右就能搭建完。强哥虽然最开始搭建不止花了一小时，不过在把弯路都走过之后。现在自己要再搭建类似的网站，按着下面的教程，一个小时准够。

小伙伴们先无脑按教程操作，搭建成功后，自然很多东西就都懂了。

一、本地环境搭建

1.1、安装git:

按照如下地址安装：Git 安装配置 | 菜鸟教程

1.2、安装node：

(Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本) 按照如下地址安装：Node.js 安装配置 | 菜鸟教程

1.3、安装hexo：

上一步安装完node后，直接打开终端，输入命令：

npm install -g hexo-cli

1.4、创建gitee账号

很多人gitee可能还不知道是什么，gitee就是马云，哦不，是码云。也就是国内的“github”。这个自己登陆网站创建吧：Gitee - 基于 Git 的代码托管和研发协作平台

1.5、建完账号后，配置gitee的ssh公钥（可选）：

这一步非必须，使用http克隆的可忽略。不过强烈建议配置下，之后提交代码什么的会方便很多。配置教程：生成/添加SSH公钥 - Gitee.com

二、搭建Hexo博客

2.1、初始化Hexo博客

随便建一个空目录，输入如下命令，并安装前端依赖包

cd <folder> //进入空目录
hexo init     //初始化
npm install    //安装依赖包

运行完后，目录结构如下：

2.2、本地试运行Hexo服务

输入如下命令运行最原始的Hexo服务

hexo s    //左边是hexo server的简化命令

输入后终端显示如下：

浏览器访问http://localhost:4000/ 如下

2.3、选主题啦

哈哈，这个可以说是最耗时的了，为什么，因为hexo支持的好看的主题太多了。主题地址：Themes | Hexo 强哥博客网站用的是pure，对应主题地址：https://github.com/cofess/hexo-theme-pure 对应主题使用教程：Hexo博客主题pure使用说明 | Cofess - Web Developer & Designer

配置完主题后，本地再次运行。如果顺利，重新启动hexo服务后，应该就能在http://localhost:4000/ 看到新的主题博客网站了。

三、创建Gitee仓库

首先很多人会问为什么不去github上搭建，而要在Gitee上。原因有二： 1、Github网站毕竟是境外网站，访问比较卡 2、Gitee上支持直接对Hexo源码进行编译更新，而Github暂时还只支持Jekyll进行编译更新。Jekyll是类似Hexo的另一种静态网站生成工具。

3.1、创建仓库

这里要注意，如果你想要一个创建一个首页访问地址不带二级目录的 pages，如ipvb.gitee.io，而不是ipvb.gitee.io/blog ，那么，你需要建立一个与自己个性地址同名的仓库，如江二十三 (ipvb) - Gitee.com 这个用户，想要创建一个自己的站点，但不想以子目录的方式访问，想以ipvb.gitee.io直接访问，那么他就可以创建一个名字为ipvb的仓库 ipvb: gitee pages 部署完成后，就可以以 Charlie's Rethinking 进行访问了。

登录gitee后，点右上角创建仓库

3.2、克隆仓库到本地

复制如下位置的仓库地址

在本地终端选择一个合适的博客存放的空目录，输入如下命令克隆仓库：

git clone git@gitee.com:xxx/demo.git  //修改你自己仓库对应的地址

克隆完后，进入本地仓库目录。 Http方式克隆的就将上面地址改成Http的仓库地址克隆即可。

3.3、添加gitignore文件

在本地仓库目录下，新建文件：.gitignore，内容如下：

/node_modules
/public
/.deploy_git

3.3、复制博客代码到当前目录下

直接将第二步骤创建好的博客代码(不要最外层的文件夹，只要与_config.yml同级别的所有文件或文件夹) 复制到当前的仓库目录下。然后在当前文件夹下，再重新启动下hexo server看看是否还能再次浏览（强哥试过，应该是能正常显示）

3.4、git提交代码

直接输入如下命令将代码同步到仓库

git add .    //添加文件夹下所有代码带git
git commit -m "xxx"    //提交代码并添加消息xxx（消息内容自行修改）
git push -u origin master    //推送源码到gitee远程仓库上

四、线上服务部署

4.1、查看代码是否成功推送

直接刷新gitee上仓库，看看代码是否成功提交

4.2、开通gitee pages服务

首先点击服务，gitee pages服务：

第一次点进去，需要提交身份证信息进行认证：认证要1个工作日审核，一个工作日认证完后，页面是这样的：

4.3、启动服务

这里注意一点就是：gitee上的hexo源码，可以直接在上面更新成静态网站，而不需要像很多教程里说的，还要在本地进行hexo g -d的操作，将编译后的代码推送到gitee仓库上。

直接点击启动按钮（第二次就会变成更新按钮），gitee就会自动在线编译部署服务了（自动npm install，hexo deploy)。启动完后，页面如下：

直接点击链接就能看到我们的网站在公网上部署成功了。

4.4、修改配置

哈哈，如果你之前弄主题的时候，url的配置没有修改的话，那页面可能会是这样

这个时候，只要修改博客源码_config.yml的url参数为你的新域名即可：然后在gitee pages页面，点更新后，网站就能正常显示了。

五、写博客

新建Markdown文件

直接在本地新建一个Markdown的文件，并编写我们自己的博客内容。

给博客文件加上标签等信息

在博客文件的文件最上方，添加如下信息：

title: 大家新春快乐~ date: 2022-01-31 22:54:00 categories:

生活 tags:

生活记录 toc: true # 是否启用内容索引效果如下：

然后将新建的博客文件放入到source/_posts 目录下，最后上传到gitee仓库上，更新gitee pages服务即可。

关于博客的图片地址

博客因为是Markdown文件写的，所以如果我们在本地直接粘贴的图片地址，地址会是本地主机的，那么等gitee仓库上更新服务后，会导致图片无法显示。所以，解决办法有如下两种：

我们将博客对应的图片文件放到一个固定的源码目录下，然后在Markdown文件上使用相对地址引用它。
我们将图片传到公共图床上（图床就是其他公司给我们提供的装门方图片的服务器，如：七牛图床、微博图床等）。然后Markdown文件直接用链接方式引用图片。

写在最后

好啦，通过上面的教程，大家跟着走，应该很快就能拥有一个自己的博客网站啦。

强哥还是很建议大家去动手搞一搞的，第一次搭建完自己的网站应该还是很有成就感的。当然如果有问题，也可以在这篇推文下留言或者在后台留言，强哥看到了会及时回复的哈。

点击关注强哥，查看更多精彩文章呀

关注公众号获取更多内容，有问题也可在公众号提问哦：

强哥叨逼叨

叨逼叨编程、互联网的见解和新鲜事