搭建怎么设置https_【从零开始】使用Hexo+github搭建免费个人博客教程（一）

前两天在b站看到一个百度的攻城狮老师的个人博客网站及简历，也想尝试搭建个人博客，通过两天的学习和摸索，终于有了一个雏形，教程总结一下发在这里，有兴趣的朋友可以自己尝试搭建。

首先攻城狮老师的个人网站及简历链接贴在下面，有兴趣的朋友可以看看，膜拜大佬。

网页简历：https://lyanbin.github.io/resume/

个人博客：https://lyanbin.github.io/

---

接下来进入正题，如何使用Hexo+github搭建免费个人博客。

本文目录

1.前言

1.1准备工作

①安装node.js、npm，了解相关基础知识；

②安装git for windows(或者其它git客户端)

③注册github账号，并创建一个库;

④配置SSH key。

1.2Hexo的配置和初始化

①Hexo的配置；

②Hexo初始化及本地预览。

1.3 Sublime Text 3 下载、修改配置及github发布

①Sublime Text 3 下载；

②修改文档配置；

③github发布。

2.总结

---

1. 前言

使用github pages服务搭建博客的好处有：

• 全是静态文件，访问速度快

• 免费方便，不需要服务器不需要后台就可以搭建一个自由无广告的个人博客；

• 可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；

• 数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；

• 博客内容可以轻松打包、转移、发布到其它平台。

1.1 准备工作

一切开始之前，我们需要：

①安装node.js、npm，了解相关基础知识；

②安装git for windows(或者其它git客户端)

③注册github账号，并创建一个库;

④配置SSH key。

---

①

安装node.js、npm，了解相关基础知识；

node.js官网 ：http://nodejs.cn/，安装稳定版本。

建议在某个系统盘中建立专门Blog文件夹，用于相关软件环境的配置，比如D:/Self Blog。除路径设置外一路默认安装，安装成功后win+R打开cmd，

输入：

node -v #查看安装是否成功

显示版本号即安装成功。

---

②

下载安装git for windows: https://gitforwindows.org/，下载后同样安装到D:/Self Blog目录下，安装过程中除安装位置需注意外还有一点需注意，此处选择第二个安装选项。

安装成功后win+R打开cmd，

输入：

git #查看安装是否成功

---

③

github作为最大的开源社区，有丰富的代码资源及学习资料，可以帮助初学者避免重复“造轮子”。

没有账号的同学移步 https://github.com/，使用邮箱申请并通过邮箱点击链接进行验证。

注册时应注意并记住 Username，对后续设置个人博客网站地址十分重要。随后登录并Create a new repository，库名应设置为Username.github.io，只有这样的形式后续才能完成Github Pages的创建。

示例：Username：L1xu

           Username.github.io：L1xu.github.io

同时勾选以下两项，完成创建。

完成创建后进行小的测试，复制我们创建的域名 Username.github.io，并在浏览器中打开，就能看到效果。

---

④

在完成git for windows安装及github账号注册后，需要进一步配置SSH key。

为什么要配置这个呢？因为提交代码要拥有github权限才可以，但是直接使用用户名和密码太不安全了，所以使用ssh key来解决本地和服务器的连接问题。

进入Github for windows 安装目录，打开git-bash.exe。

输入代码：

ssh-keygen -t rsa -C "邮件地址"

然后连续3次回车，最终会生成一个文件在用户目录下，打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容，打开github主页，进入Settings -> SSH and GPG keys -> New SSH key。

将刚复制的内容粘贴到key那里，title随便填，保存。

---

1.2 Hexo的安装和初始化

①Hexo的配置；

②Hexo初始化及本地预览；

---

①

什么是Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

Hexo官网: https://hexo.io/zh-cn/docs/

安装Hexo前需要安装：

• Node.js

• Git

前文中我们已经对这两项进行配置，因此接下来直接安装。

示例：可在D:/Self Blog下，进行Hexo的安装和初始化。

打开cmd命令行，cd到Self Blog文件夹下

输入代码：

$ npm install hexo-cli -g  #安装

---

②

初始化及本地化预览。

安装成功后，输入代码：

hexo init Username #此处Username为前文中设置的Username

初始化完成，cd到Username目录下，输入代码：

npm installnpm install hexo-deployer-git --save #安装git插件

安装成功后，输入代码进行本地预览：

hexo s-p 5555 #此处设置5555是为了避免端口被占用

随后打开浏览器，网址栏中输入localhost：5555 进行本地预览，此时就能看到我们建立的博客本地化预览，此时为官方自带主题。

---

1.3 Sublime Text 3 下载、修改配置及github发布

①Sublime Text 3 下载安装；

②修改文档配置；

③github发布。

①

Sublime Text 3作为一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件，不仅具有华丽的界面，还支持插件扩展机制，对初学者十分友好，是Coding和Writing的不错选择。

Sublime Text 3官网下载：https://www.sublimetext.com/3

安装过程中除安装位置可放在D:/Self Blog下，其余均默认进行。

---

②

安装完成后，我们可以利用Sublime Text 3来进行配置代码的修改。

打开应用程序后，我们可以直接将文件夹拖到Sublime程序界面，可以发现：此时，Sublime程序界面有了Slef Blog文件夹的下属目录，同时我们也可以对各种配置文件进行编辑。

此时我们选中hello-world.md文件，如下图所示。

我们可以在 ## Quick Start上方一行添加以下代码：

## Hello Hexo

添加后Ctrl+S保存。

注意：Hexo的编写及格式中，不同分级标题通过 # 的数量来进行区分，示例及写法如下，具体的写法在后面会再讲到，有兴趣的朋友也可先自行查阅：

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

---

③

github发布，在上传之前我们需要先在Sublime中对站点设置文件_config.yml进行修改，主要涉及url部分、deploy部分。

url部分:

url修改为之前我们创建的仓库名称：即 https://username.github.io

deploy部分:

type：git

repo: 修改为之前github中所建库的链接，如下图链接。

branch：main

全部修改完成后，Ctrl+S保存。

打开cmd命令行，cd到Self Blog目录下，输入代码：

hexo g #生成hexo d #提交

之后会提示输入github的用户名及密码进行授权，输入登录完成后，稍等片刻，提交成功。

在浏览器中输入自己的域名访问，就可以看到建立的个人博客了。

可以看到，在对hello-world.md文件修改之后，比原始的界面多出了一个二级标题，Hello Hexo。

---

2.总结

写在最后，经过了一些列的环境搭建、配置修改到最后的github发布，一个初步的个人博客已经搭建起来了。整个搭建步骤十分繁琐，但有兴趣的同学不妨一试，最终搭建成功的时候，一个属于你自己的自由无广告博客就诞生了。

搭建过程中如果有遇到问题欢迎交流探讨。

---

搭建一个博客容易，相比之下，保持好奇和持续输出更为困难，感谢关注！

后面抽时间更新Hexo其他主题的配置以及利用Hexo撰写博客的写法。

新鲜出炉的个人博客，欢迎关注：L1xu.github.io

参考文献：

1.手把手教你搭建属于自己的Hexo+github博客

https://www.bilibili.com/video/BV1cW411A7Jx?p=1

2.使用hexo+github搭建个人博客详细教程

https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html