使用Hexo+Github搭建静态博客

花了一下午终于搭完了博客,用的是Hexo和GithubPages组建的静态博客,这是我的站点十二棵橡树,主题用的是Next。域名快二月份过期了,打算重新申请个。

之所以写博客,是因为想记录下自己学习踩坑过程,以前也玩过Wordpress,买过VPS搭博客,但因为懒不怎么输出东西。现在想来,要往前端方向发展的话,有必要开个博客,记录所思所想,一方面逼自己有系统的学习梳理知识结构,另一方面也可以为其他人提供些踩坑经验。想想自己很多时候遇到问题是看别人的博客解决问题的,当自己有能力玩得更深的时候,回馈下经验,帮助下后来人。嗯:)

好,废话不多说,开始本篇教程。

一.安装基础工具

我的环境:win10+Node.js+Git for Windows+VS code

搭建Hexo,必备Node.js和Git,这两个安装教程这里不贴了。推荐使用nvm安装node,贴一个nvm安装教程,照着来就是。Git for windows的安装也不作细讲,网上很多成熟的教程。

说一点题外话,有时候用搜索工具搜索出来的内容不是很新,比如一些热门的教程是13、14年的,版本上差异很大,这时候要用设定下时间范围。

使用Hexo+Github搭建静态博客_第1张图片

通过这样的方式常常能找到最新的教程。

当安装完以后,在命令行里测试下是否安装正确。

使用Hexo+Github搭建静态博客_第2张图片

node版本,最新LTS版为6.9.4,我没有测试最新版稳定性,用的旧版。

使用Hexo+Github搭建静态博客_第3张图片

git截图

二.新建github仓库。

申请个github账号,新建仓库。


使用Hexo+Github搭建静态博客_第4张图片

仓库名一定要取yourname.github.io这样的格式,这样github自动会识别出来。

使用Hexo+Github搭建静态博客_第5张图片

在仓库的设置里有这一栏显示

这样仓库建完了。下一步使用git连接。

三.使用git连接

使用SSH连接github,先在本地生成密钥。

1.在本地使用git bash

这里的[email protected]是你的邮箱地址,在输入后会询问你是否保存创建的ssh key,点回车就好,然后要求输入你要设置的密码,如果直接回车表示不设密码。然后会提示你ssh key已经创建好。

2.将生成的公钥放入github

创建完以后,在C:\Users\XXX.ssh文件夹里发现生成两个文件,id_rsaid.rsa.pub,XXX是你window下的用户名,用记事本打开id.rsa.pub,Ctrol+A复制,再进入github设置区(注意,仓库的设置和账户的设置是不同的),找到SSH and GPG keys 选项,新建SSH,复制进去就可以了。

使用Hexo+Github搭建静态博客_第6张图片

3.回到本地使用Git连接

git bash终端输入ssh -T [email protected] 并且回车,如果成功的话会出现
You’ve successfully authenticated, but GitHub does not provide shell access
表示成功连上。

4.设置邮箱和密码

在终端中设置邮箱密码,因为部署的时候需要记录。

$ git config --global user.name "your name"
$ git config --global user.email "[email protected]"

到这一步就算完成配置啦。

四.安装Hexo

1.首先安装Hexo命令行

在CMD中,输入npm install -g hexo-cli,顺便把部署工具也装了,输入npm install hexo-deployer-git –save

2.建立初始项目

选择电脑上一个合适的文件夹,用VScode进入,在终端中用Ctrl+\ 输入hexo init` ,生成初始文件

使用Hexo+Github搭建静态博客_第7张图片
t.PNG

输入hexo g 生成静态文件,hexo s本地启动,在浏览器输入localhost:4000,查看是否正确启动。
如果出现界面的话表明一切正常。

五.最后一步,部署!

找到** _config.yml**配置文件,在最后deploy项进行修改

使用Hexo+Github搭建静态博客_第8张图片
Paste_Image.png
deploy:
    type: git
    repo: [email protected]:xxxxx  #自己的刚刚新建的仓库地址 
    branch: master #主分支就可以

说明下,仓库地址选择SSH地址,

使用Hexo+Github搭建静态博客_第9张图片
Paste_Image.png

还有切记,配置文件有严格的规则,type: gittype和git中必须只有一个空格,这个错误我也是犯了好久才明白的。

最后,在终端输入hexo d,等待它部署完,在浏览器中输入之前的地址:yourname.github.io,大功告成!

你可能感兴趣的:(使用Hexo+Github搭建静态博客)