5分钟搭建Hexo个人博客

素颜马尾好姑娘i 2023-03-13 05:51 8阅读 0赞

原创：祈澈菇凉

##### 写在前面的话 #####

很早以前就想要搭建一个个人的博客，奈何只是一个前端切图仔，对于后端和数据库接口上手存在一定的难度，于是一拖拖了很久，今天无意中发现了使用Hexo搭建个人博客很快就能用了，而且托管在github平台也不需要自己去买服务器域名和维护，一举数得，非常nice，记录了一下搭建Hexo个人博客的步骤，尽可能的写的详细一点~

##### 准备工作步骤 #####

1：GitHub上面新建一个仓库，用来放自己的博客  
2：安装git工具，生成SSH添加到GitHub  
3：本地环境搭建，安装node 和npm  
4：本地初始化Hexo项目并且运行  
5：Hexo主题  
6：部署到github  
7：生成markdown文件，写文章并且发布

言归正传，开始我们的写作步骤吧

\#\#\#\#\#一：在GitHub上面新建一个仓库，用来放自己的博客  
1：新建一个仓库  
创建一个和你用户名相同的仓库，后面加.github.io后缀，必须要同名哦，不然后面会出现页面404的情况，点击create respository按钮创建。

![format_png][]

2：安装git工具，生成SSH添加到GitHub  
安装git工具这里就不多说了，安装完成之后，在桌面上git bash进入命令行，输入GitHub用户名和邮箱验证。

yourname输入你的GitHub用户名
    youremail输入你GitHub的邮箱

![format_png 1][]

查看输入是否正确  
![format_png 2][]

3：然后创建SSH，一路回车

ssh-keygen -t rsa -C "xxxx7537@qq.com"(你的邮箱）

![format_png 3][]

这个时候可以看到在磁盘里面生成了私人密钥和公共密钥了  
![format_png 4][]

4：在GitHub上设置密钥  
在GitHub的setting中，找到Deploy keys的设置选项，点击新建一个密钥，把id\_rsa.pub里面的信息复制进去，id\_rsa.pub打开方式可以使用浏览器打开。  
![format_png 5][]

![format_png 6][]

新建密钥成功，到这里github仓库和密钥问题就OK了。  
![format_png 7][]

##### 二：Hexo搭建个人博客-框架的本地安装和运行 #####

1：Hexo的官网  
https://hexo.io/

2：安装node 和npm  
hexo基于node.js，本地需要安装node 和npm，安装步骤就不多说了  
查看一下是否有版本号，有的话则安装成功。  
![format_png 8][]

3：全局安装 hexo

npm  i  hexo-cli -g

![format_png 9][]  
4：初始化一个项目

hexo  init blog

![format_png 10][]  
这时候可以看到在d盘里面生成了一个文件夹。  
![format_png 11][]  
5：进入项目文件夹，安装依赖文件

cd  blog
    npm  install

![format_png 12][]  
6：运行，并且在浏览器打开，就可以看到博客页面了

hexo server

http://localhost:4000  
![format_png 13][]

![format_png 14][]

#### 三：更换一个自己喜欢的主题 ####

1：博客主题的安装  
主题这一块可以选择自己喜欢的，以下是以一个Anisina主题为例，这里有很多主题可以选择：传送门：https://hexo.io/themes/。比如选一个主题：https://github.com/haojen/hexo-theme-Anisina，打开链接，进入到GitHub里面，有详细的安装教程。  
![format_png 15][]

![format_png 16][]  
2：安装主题命令输入

git clone https://github.com/Haojen/hexo-theme-Anisina.git themes/Anisina

![format_png 17][]

3：打开`_config.yml`文件夹，更改主题名字  
![format_png 18][]

4：再次启动，就可以看到更换的主题了。  
![format_png 19][]  
![format_png 20][]  
OK，搭建好了自己喜欢的主题风格了，接下来需要部署了。

#### 四. 部署到github ####

1：在配置文件里面填写仓库地址  
在项目里面找到 \_congif.yml文件，找到 deploy 字段，把以下代码放进去，填写第一步新建的仓库地址。

# Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
    type: git
    repo: <你的仓库地址> # https://github.com/wangxiaoting666/wangxiaoting666.github.io.git
    branch: master

![format_png 21][]

2：安装一个推送工具，将本地项目推到仓库上。

npm install hexo-deployer-git --save

![format_png 22][]

![format_png 23][]  
3：然后执行以下命令  
清除了你之前生成的东西，也可以不加。

hexo clean

4：hexo generate 生成静态文件，可以用 hexo g缩写

hexo  g

![format_png 24][]

![format_png 25][]

可以看到在目录里面生成了一个静态的文件，生成好的public文件夹就直接当成静态网站进行部署即可。

5： 部署

hexo deploy

注意这里需要输入GitHub用户名和密码哦  
![图片.png][.png]

![format_png 26][]

6：查看仓库，已经将项目放在仓库里面了

![format_png 27][]  
这个时候就可以访问了，已经把静态文件都托管在GitHub了，查看分配的地址：[https://wangxiaoting666.github.io/][https_wangxiaoting666.github.io]

#### 五：开始写文章 ####

1：新建一个markdown文件

hexo new newpapername

![format_png 28][]  
在source\_posts里面生成了markdown文件夹，用来写文章了，记住要使用markdown格式书写文章博客。  
![format_png 29][]

![format_png 30][]

2：当你写完的时候，再输入命令

hexo clean
    hexo g
    hexo d

就可以看到新增的自己的文章了  
\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-65AtCjjS-1589193610214)(https://upload-images.jianshu.io/upload\_images/5640239-be4a485be4499939.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\]

3：如果要再写一篇，可以再生成一个md文件进行书写

hexo new test

![format_png 31][]  
4：好了，自己的博客搭建起来了，后面会慢慢的往里面增加一些文章，以及接入评论系统，统计文章阅读量，代码高亮，图床等功能。

参考文档：https://blog.csdn.net/sinat\_37781304/article/details/82729029

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[format_png]: /images/20230312/2fb8a6385f78456f92cde37fee17b775.png
[format_png 1]: /images/20230312/0b6f4e6ed27840a79c90966f2fe6a5a8.png
[format_png 2]: /images/20230312/a057fa1a3bdb4a4da78af06d013fa78a.png
[format_png 3]: /images/20230312/4c0989c68f37451387dadc6a2dd486ca.png
[format_png 4]: /images/20230312/640db483841f462c95090006d8dc1646.png
[format_png 5]: /images/20230312/8bf1a492785b4f2a9f915715ce76b5de.png
[format_png 6]: /images/20230312/e2db174cec1e403c940a7fbf71e3b753.png
[format_png 7]: /images/20230312/3bb5a3ff38964db7a9479bc42bf08ee1.png
[format_png 8]: /images/20230312/a49aa060b0454910822c4839f1399fc3.png
[format_png 9]: /images/20230312/942e0827e7804e1690b1a13d382151f9.png
[format_png 10]: /images/20230312/b23ab8868f5b493b9d788af94870bbc3.png
[format_png 11]: /images/20230312/2f13633a1ae94e0dad5de5e6f0100186.png
[format_png 12]: /images/20230312/882bd20dff594f52a2daff8112867f39.png
[format_png 13]: /images/20230312/8d2eb8523df7495e9981d92e7049712a.png
[format_png 14]: /images/20230312/f89b8dddecaa40c1aa6cdd209e691f48.png
[format_png 15]: /images/20230312/aa4867a2e72542899a58a4a898999de5.png
[format_png 16]: /images/20230312/8aea0a43f49b49bfbb73f953f725db32.png
[format_png 17]: /images/20230312/42406fafd97a4d068a2d71e5a739cd46.png
[format_png 18]: /images/20230312/69699469870d4073915887d2faa97ccd.png
[format_png 19]: /images/20230312/060cdf9a0d6d4398bd2062cacb239b85.png
[format_png 20]: /images/20230312/c831db15e75c44b9addcea87d2395fc4.png
[format_png 21]: /images/20230312/380c84b1eb4543a69652d80882fd02d9.png
[format_png 22]: /images/20230312/d4f3836f294842cab68f0be91e35fe44.png
[format_png 23]: /images/20230312/11d9d77b3e6b48f185bfdc9ce364d67c.png
[format_png 24]: /images/20230312/f1cbc11b522747579bce18932e828b9e.png
[format_png 25]: /images/20230312/18d4a774e38749d69582f3197e86121c.png
[.png]: /images/20230312/3538ad77e26b483e93a7b6b57fd73264.png
[format_png 26]: /images/20230312/7d77a06f4b174e38bcc06a08df0f4779.png
[format_png 27]: /images/20230312/a301c27b6926401b9ecbd0559240e7ea.png
[https_wangxiaoting666.github.io]: https://wangxiaoting666.github.io/
[format_png 28]: /images/20230312/81b3cd0202bb463b965d8e5db9677fef.png
[format_png 29]: /images/20230312/6b996b08528442fabb493e1e60e469a1.png
[format_png 30]: /images/20230312/6fb9f1dc73bc4762b713df7b20f925ae.png
[format_png 31]: /images/20230312/563317755b19427182f3d6e633958d43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/8b93dd6dffa84f688b7b86a29eb858e9.png