基于hexo主题框架+GitHub搭建个人博客网站-小白图文教程超详细！

基于hexo主题框架+GitHub搭建个人博客网站

🚀欢迎访问我的博客小站:亦小染のBlog - 念念不忘，必有回响 (ycoderan.cn)

1.域名注册

GitHub白嫖就行

腾讯云、阿里云、百度云等平台，然后一系列流程就行啦。

2.下载工具

2.1下载node.js

介绍:

• Node.js 就是运行在服务端的 JavaScript。
• Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。
• npm（"Node 包管理器"）是 JavaScript 运行时 Node.js 的默认程序包管理器。

官网地址： Node.js

安装教程： Node.js安装教程

验证： 命令行输入 node -v

2.2下载git

介绍： Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。

官网地址： Git - Downloading Package (git-scm.com)

安装教程： Git 详细安装教程:详解 Git 安装过程的每一个步骤

验证: 打开 git bush 输入：git version

2.3命令行安装Hexo

介绍： Hexo是一个快速、简洁且高效的博客框架。

优点： 如果使用 Hexo 的话，那么博客的搭建是非常方便的，它可以将文件托管到 Github 上面而不需要购买服务器就可以实现博客网站的搭建，而且由于是静态，所以加载速度较快，且使用 Hexo 的人也比较多，主题，插件什么的都比较丰富。

缺点： Hexo 虽然搭建方便且快速，但是它却没有后台界面，所以对于新手来说还是比较困难，它没有数据库，对数据的修改比较麻烦，且由于配置都在本地，很可能换个电脑，就没法使用后台。

其他主题框架： WordPress（重量级、功能强大）、Typecho（拥有后台系统，简洁风的主题挺好看）。需要服务器，要钱， 不多说，感兴趣可以自行了解。

官网地址： Hexo

安装： cmd输入：cnpm install -g hexo-cli

验证 ：hexo -v

3.配置GitHub

介绍： GitHub是一个代码托管云服务网站，主要用于软件开发者存储和管理其项目源代码，且能够追踪、记录并控制用户对其代码的修改。

3.1注册Github账号

首先你要有一个Github账号，注册很简单，唔，就是有点慢，不多说了

3.2创建GitHub仓库

创建一个仓库：仓库名必须是你的用户名.github.io

注意： 仓库一定要选择public噢

3.3配置SSH免密登录

介绍：

• ssh指secure shell（一种安全的网络协议），git使用这种协议进行远程加密登录。
• ssh登录安全性由非对称加密保证，产生密钥时，一次产生两个密钥，一个公钥，一个私钥，在git中一般分别命名为id_rsa.pub, id_rsa

为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，我们使用ssh key来解决本地和服务器的连接问题。

1.在电脑中进入任意一个文件夹，右键点击Git Bush Here,输入命令：ssh (检查电脑里是否安装了shh)；

然后输入命令：ssh-keygen -t rsa -C github邮件地址 (注意中间有空格），输入后连续敲击四次回车

成功页面：（这个页面不要急着关哈，后面要验证SSL）

2.然后就生成了一个ssh文件夹，C:\Users\x's'y'bill\.ssh（每个人的用户目录可能不一样）下找到id_ras.pub 文件并打开(用VS code或者记事本都行)

复制里面的全部内容ctrl+a,ctrl+c

（手贱点太快了直接VS打开了还自动生成了个.ssh文件夹┭┮﹏┭┮）

3.进入github设置页面

ctrl+v全部粘贴过来即可，一定不要自己格外多加空格啥的

最后生成ssh

4.测试ssh是否绑定成功

刚才那个git页面里输入命令 ssh -T git@github.com （注意不用改 ），敲一次回车等待在后面输入yes

4. hexo搭建博客

4.1 本地初始化博客

1.建立一个文件夹

2.进入文件夹，在文件夹空白页面下右键Git Bash Here，初始化hexo，输入命令：hexo init ，生成一系列文件

3.输入命令：hexo s 出现一个 http://localhost:4000/地址就是我们的本地博客页面，打开可以在浏览器访问。

4.2将博客部署到GitHub上

1.找到刚才生成文件中_config.yml,用vscode（记事本也行）打开

在文末添加如下内容：

deploy: 

	type: git

	repository:  https://github.com/Alicecici/Alicecici.github.io.git //填你自己仓库的地址

	branch: main

如图找仓库地址:

2.上传至GitHub仓库

Blog文件夹下页面右键 Git Bush

输入命令：npm install hexo-deployer-git --save

依次输入：

• hexo g //生成页面

• hexo d //上传

就上传到你的仓库啦，然后就可以通过网址访问博客了，网址就是你的仓库名，Alicecici.github.io

在github page中也可以找你的网址。

tip: 如果hexo d老报错，可以试试一下解决方案哦，亲测有效

第一种：

首先第一步进入你的/Blog文件夹找到并删除.deploy_git文件夹; 然后在Git bash里依次输入:

​ git config --global core.autocrlf false ​ hexo c ​ hexo g ​ hexo d

（记得每输入一次敲回车命令）

第二种：

如果还不行的话，可能是账户认证出现了问题，需要你输入： git config --global user.email "邮箱" git config --global user.name "用户名" 最后再试试上传，看见INFO Deploy done： git就代表成功啦

第三种：

还有一种可能网络原因或者GitHub外网嘛上传有点慢多hexo d几次就行啦

5. Visual Studio code

vscode介绍： 是一款由微软开发轻量级且跨平台的源代码编辑器

​ 对编程语言的支持很强大：

• 内置对JavaScript、TypeScript、Node.js的支持；
• 其他语言的扩展生态系统：C/C++、C#、Java、Python、PHP、Go；
• 运行时环境的支持：.NET、Unity；

6. 配置文件说明以及常用命令

6.1 配置文件

6.2 常用命令：

hexo n "文章标题" //新建文章

hexo c //清理缓存

hexo g //生成

hexo s //预览

hexo d //上传

7.安装博客主题

主题推荐：

Butterfly

Shoka

Volantis

ParticleX

嘿嘿，我这里用的是butterfly主题，建议直接看主题文档的安装和美化，地址在这里，Butterfly。

7.1 npm安装

打开vscode,终端输入命令：npm i hexo-theme-butterfly

7.2 应用主题

打开_config.yml文件

更改 theme: butterfly

7.3 安装插件

终端输入命令：npm install hexo-renderer-pug hexo-renderer-stylus --save

8. Butterfly主题页面配置（部分）

8.1 创建子页面

比如：我要创建个标签页面

1.前往你的 Hexo 博客的根目录 终端输入hexo new page tags

2.会生成一个新文件，你会找到这个文件source/tags/index.md

3.修改此文档 ：记得添加type: "tags"

（要注意yml语法，缩进不能改动）

其他类似啦，看官方文档就行。

8.2 导航栏配置

8.2.1 修改主题配置文件

基本格式：子页面名: /子页面文件名/ || 图标名

默认子目录是展开的，如果你想要隐藏，在子目录里添加：hide

8.2.1 图标下载

传送点：Font Awesome

8.3 背景图片配置

这里介绍的是使用本地图片

介绍如何给tag页面顶部图

第一步：在source文件下新建一个存放图片的img文件夹

第二步：配置文件中找到图片配置，在tag_img下添加图片路径即可（用相对路径）

第三步：在tags文件夹下的index.md文件中也添加这张背景图，加一行代码：

top_img: "./img/tag01.png"

其他子页面同理啦。

想让你的博客变得更好看的话还有很多需要配置的地方，像文章页面啊、侧边栏啊、代码啊、评论啊，还有好多博客的美化，详细请看官方文档，传送点：Butterfly - A Simple and Card UI Design theme for Hexo。

9. 绑定个人域名

9.1 控制台解析

包括添加两条解析记录，xxx.xxx.xxx.153是GitHub的地址，你也可以ping你的 xxxx.github.io 的 ip地址，填入进去

ping一下吧：

9.2 GitHub设置

1.在 xxxx.github.io仓库下新建一个名为 CNA ME 文件夹，里面填写你的域名ycoderan.cn，不要加www.或者htpp啥的

3.在仓库设置页面查看有没有添加成功

10.博客美化

自己自由发挥吧，也可以搜搜教程...

欣赏： 大佬们的Butterfly美化和魔改

传送点 ：Akilarの糖果屋 - Akilar.top

​ 海拥 - 一个乐于分享技术与快乐的博主-摸鱼小游戏-计算机技术基础知识 (haiyong.site)

11. 使用Vercel托管你的博客吧

11.1 介绍

vercel 是国外一家网站托管服务，提供CDN加速

• vercel类似于github page，但远比github page强大，速度也快得多得多，而且将Github授权给vercel后，可以达到最优雅的发布体验，只需将代码轻轻一推，项目就自动更新部署了。
• vercel还支持部署serverless接口。那代表着，其不仅仅可以部署静态网站，甚至可以部署动态网站，而这些功能，统统都是免费的
• vercel还支持自动配置https，不用自己去FreeSSL申请证书，更是省去了一大堆证书的配置
• vercel目前的部署模板有31种之多

11.2 注册Vercel

用GitHub登录注册就行

官网：vercel.com/

11.3 添加项目

点击右上角的 Add New... ，点击 Project 添加项目，选择 Continue with Github，导入在 github 托管的博客仓库

这里导入自己的仓库用户名.github.io，然后点击import，deploy 即可。

11.4 添加自定义域名

去到刚刚部署的项目中，点击 Settings，进入到 Domains，添加自己的域名。

此时，只需在域名托管商添加一个 CNAME 记录即可（会提示你添加怎样的记录），然后等待一会刷新验证成功，Vercel 就能帮你部署 SSL 证书并提供用户访问，你的博客就正式托管在 Vercel 上了！

11.5 解决Vercel被墙后国内无法访问问题

更改解析：

IP： 76.76.21.21 改成 76.223.126.88

CNAME： cname.vercel-dns.com 改成 cname-china.vercel-dns.com

last：只要兴趣和热爱长存，技术自然会往前走 🐱‍🏍