Hexo+GitHub搭建个人博客

一 搭建

步骤

• 1.安装Git
• 2.安装Node.js
• 3.安装Hexo
• 4.GitHub创建个人仓库
• 5.生成SSH添加到GitHub
• 6.将hexo部署到GitHub
• 7.设置个人域名
• 8.发布文章化

1.安装Git

为了把本地的网页文件上传到github上面去，需要用到工具—Git[下载地址]。

windows：到git官网上下载.exe文件,Download git,安装选项还是全部默认，只不过最后一步添加路径时选择Use Git from the Windows Command Prompt，这样我们就可以直接在命令提示符里打开git了。

windows在git安装完后，就可以直接使用git bash来敲命令行了，不用自带的cmd。

linux：对linux来说实在是太简单了，因为最早的git就是在linux上编写的，只需要一行代码

sudo apt-get install git

安装完成后在命令提示符中输入git --version来查看一下版本验证是否安装成功。

2.安装Node.js

Hexo是基于node.js编写的，所以需要安装一下node.js和里面的npm工具。

windows：下载稳定版或者最新版都可以Node.js，安装选项全部默认，一路点击Next。
最后安装好之后，按Win+R打开命令提示符，输入node -v和npm -v，如果出现版本号，那么就安装成功了。

linux：命令行安装：

sudo apt-get install nodejs
sudo apt-get install npm

3.安装Hexo

前面git和nodejs安装好后，就可以安装hexo了，输入npm install -g hexo-cli安装Hexo。可能会有几个报错，无视它就行。

npm install -g hexo-cli

安装完后输入hexo -v验证是否安装成功。

然后cd到这个文件夹下（或者在这个文件夹下直接右键git bash打开）。

比如我的博客文件都存放在D:\Document\Blog目录下。

在该目录下右键点击Git Bash Here，打开git的控制台窗口，以后我们所有的操作都在git控制台进行，就不用Windows自带的cmd了。

接下来初始化一下hexo，即初始化我们的网站，输入hexo init初始化文件夹

hexo init

这个Blog可以自己取什么名字都行，然后，接着输入npm install安装必备的组件。

cd Blog      //进入这个MyBlog文件夹
npm install

新建完成后，指定文件夹Blog目录下有：

• node_modules: 依赖包
• public：存放生成的页面
• scaffolds：生成文章的一些模板
• source：用来存放你的文章
• themes：主题**
• _config.yml: 博客的配置文件**

这样本地的网站配置也弄好啦，输入hexo g生成静态网页，然后输入hexo s打开本地服务器

hexo g
hexo server(或者简写:hexo s）)

然后浏览器打开http://localhost:4000/，就可以看到我们的博客啦

4.GitHub创建个人仓库

使用github，用来存放我们的网站。

新建一个项目仓库New repository，
输入自己的项目名字，后面一定要加.github.io后缀，README初始化也要勾上。

5.生成SSH添加到GitHub（可跳过）

生成SSH添加到GitHub，连接Github与本地。
右键打开git bash，然后输入下面命令：

git config --global user.name "yourname"
git config --global user.email "youremail"

这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。例如我的：

git config --global user.name "shw2018"
git config --global user.email "hwsun@std.uestc.edu.cn"

可以用以下两条，检查一下你有没有输对

git config user.name
git config user.email

然后创建SSH,一路回车

ssh，简单来讲，就是一个秘钥，其中，id_rsa是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。

ssh-keygen -t rsa -C "youremail"

这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。或者git bash中输入

cat ~/.ssh/id_rsa.pub

将输出的内容复制到框中，点击确定保存。

打开github，在头像下面点击settings，再点击SSH and GPG keys，新建一个SSH，名字随便取一个都可以，把你的id_rsa.pub里面的信息复制进去。

在git bash输入ssh -T git@github.com，出现你的用户名，那就成功了。

6.将hexo部署到GitHub

这一步，我们就可以将hexo和GitHub关联起来，打开博客根目录下的_config.yml文件，这是博客的配置文件，在这里你可以修改与博客配置相关的各种信息。

修改配置：

deploy:
  type: git
  repository: https://github.com/Tian-JQ/Tian-JQ.github.io.git
  branch: master

repository修改为你自己的github项目地址即可，就是部署时，告诉工具，将生成网页通过git方式上传到你对应的链接仓库中。

这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。

npm install hexo-deployer-git --save

然后

hexo c
hexo g
hexo d

其中 hexo c (hexo clean)清除之前生成的东西，也可以不加。 hexo g (hexo generate) 生成静态文章，hexo d (hexo deploy)部署文章，

注意deploy时可能要你输入username和password。

过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了！

7.设置个人域名

现在你的个人网站的地址是yourname.github.io，如果觉得这个网址逼格不太够，这就需要你设置个人域名了。但是需要花钱。

这一步不是必要的，如果目前还不想买域名可以先跳过，继续看后面的，以后想买域名了在还看这块

首先你得购买一个专属域名，xx云都能买，看你个人喜好了。

这篇以腾讯云为例，腾讯云官网购买：

然后实名认证后进入腾讯云控制台，点云解析进去，找到你刚买的域名，点进去添加两条解析记录：

然后打开你的github博客项目，点击settings，拉到下面Custom domain处，填上你自己的域名，保存：

这时候你的项目根目录应该会出现一个名为CNAME的文件了。如果没有的话，打开你本地博客/source目录，我的是D:\Study\MyBlog\source，新建CNAME文件，注意没有后缀。然后在里面写上你的域名，保存。最后运行hexo g、hexo d上传到github。

过不了多久，再打开你的浏览器，输入你自己的专属域名，就可以看到搭建的网站啦！

8.发布文章

首先在博客根目录下右键打开git bash，安装一个扩展npm i hexo-deployer-git。

然后输入hexo new post "article title"，新建一篇文章。

然后打开D:\Document\Blog\source\_posts的目录，可以发现下面多了一个文件夹和一个.md文件，就是你的文章文件啦。
使用md文档编写markdown文件，可以实时预览。
编写完markdown文件后，根目录下输入hexo g生成静态网页，然后输入hexo s可以本地预览效果，最后输入hexo d上传到github上。这时打开你的github.io主页就能看到发布的文章啦。

二 个性化

主题大全：https://hexo.io/themes/

推荐主题：https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md

更换主题

修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: hexo-theme-matery

其他个性化设置可参考：https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md
https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/#toc-heading-9

三 图床

编写md文档时，图片处理及其让人头疼，一旦本地图片丢失，md文档中图片就会无法显示，所以我们需要将图保存到图床，即使本地图片丢失，md也不受影响。

免费图床方案：PicGo+jsdelivr+github

教程链接

—————————————————————————————————————————-

参考：

特别鸣谢！

https://www.cnblogs.com/shwee/p/11421156.html

https://301technology.cn/2020/01/19/hexoblog/#%E5%89%8D%E8%A8%80

主题：

https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md

图床：

https://301technology.cn/2020/01/17/image/#%E6%9C%AC%E6%96%87%E7%94%A8%E5%88%B0%E7%9A%84%E5%B7%A5%E5%85%B7%E6%88%96%E7%BD%91%E7%AB%99

bilibili:

https://www.bilibili.com/video/av65336062?from=search&seid=9800526859366131449