静态博客系统Hexo

其实很多年以前,在静态博客刚开始流行的2014年,我就已经尝试过hexo,并且将其部署到了github page。只不过当时主要目的是为尝鲜(包括gohst博客系统等),最终还是选择了wordpress作为博客程序。最近打算学下前端知识,刚好想起hexo使用 markdown编写文章,于是又开始尝试使用hexo,这样一次性可以把html css js git全都练个遍。

好了进入正题,准备工作当然是先在本地安装node.js和git工具,这个自行安装,不作赘述。

然后就是 常规的本地 部署hexo,步骤基本就那些。

  • 安装hexo
  • npm install -g hexo-cli
  • 选择一个目录来存放hexo
  • D:
  • mkdir hexo
  • hexo init hexo //后面那个hexo的意思是指我们刚才创建的这个文件夹
  • cd hexo
  • npm install
  • 至此本地安装完成
  • hexo server
  • 本地浏览器访问http://localhost:4000/即可本地打开hexo

本地安装好以后,我们需要把它部署到公网上,我们可以选择免费的github page来部署我们的网站。

新建github page的方法大家自行百度,因为我是2014年就建好了的,年代久远,没多大印象怎么创建了,反正不难,每个用户有一个免费的额度。

创建Github账号

创建仓库, 仓库名为:<your name>.github.io

将本地Hexo博客推送到GithubPages

3.1. 安装hexo-deployer-git插件。在命令行(即Git Bash)运行以下命令即可:

$ npm install hexo-deployer-git –save
3.2. 添加SSH key。

创建一个 SSH key 。在命令行(即Git Bash)输入以下命令, 回车三下即可:

$ ssh-keygen -t rsa -C “邮箱地址”
添加到 github。 复制密钥文件内容(路径形如C:\Users\Administrator.ssh\id_rsa.pub),粘贴到New SSH Key即可。

这里插一段,其实也可以进入自己这个仓库 以后,单机settings,在里面有一个添加deploy密钥的选项。在这里添加应该和整个账号的设置那里添加效果是一样的,毕竟我们是给这个特定的仓库推送,只给它单独添加一个密钥就可以了。

$ ssh -T git@github.com
$ yes

测试是否添加成功。在命令行(即Git Bash)依次输入以下命令,返回“You’ve successfully authenticated”即成功:

3.3. 修改_config.yml(在站点目录下)。文件末尾修改为:

Deployment

Docs: https://hexo.io/docs/deployment.html

deploy:
type: git
repo: git@github.com:/.github.io.git
branch: master
注意:上面仓库地址写ssh地址,不写http地址。

3.4. 推送到GithubPages。在命令行(即Git Bash)依次输入以下命令, 返回INFO Deploy done: git即成功推送:

步骤3.3遇到了第一个坑,冒号后面必须跟一个空格,才能接后面的内容,比如type: git 。还有就是type一定记得要用tab键进行缩进。repo后面的值其实可以直接去你刚才在github上创建的仓库那里copy过来就行

(PS:这儿在插一段,网上有些教程说的是执行这三个命令来部署

   hexo clean

  hexo generate

    hexo deploy

其实效果应该是一样的,我们就用下面这两个简单一些。)

1
2
$ hexo g
$ hexo d

此处遇到了第二个坑,我执行hexo d 的时候一直提示我无权限,可是我刚才ssh -T明明通过了呀。原因就是因为我设置私钥的时候设置了密码的,但是用windows自带的cmd窗口始终无法弹出让我输入密码的输入框。于是找到了git安装目录,打开git-bash.exe 。切换到D:/hexo目录下,重新执行hexo g 和hexo d,这时候成功弹出了让我输入私钥密码的输入框,输入密码后,提交成功。(PS:这里建议大家设置私钥的时候就不要设置密码了,每次这样输入密码太麻烦了。我也不知道自己怎么脑子抽了,去给私钥设置一个读取密码,当时没多想,设置私钥的时候提示是否要设置密码,我就选了。。)。大家自动对比下这两个窗口的区别

至此我们的hexo就成功部署到github page啦,稍微等待一小会儿,就可以通过xx.github.io访问你的hexo啦(xx为你创建github page时取的名字)

最后我们来绑个自定义域名吧,先去你的dns服务商那里设置一个cname记录,记录值填写你刚才访问hexo的那个域名,就是github.io结尾的那个。

然后去我们本地 的hexo目录下,有一个source文件夹,在里面 新建一个CNAME.txt文件,编辑它,内容就写你刚才自定义的域名,保存后将文件重命名为CNAME,没错,就是去掉txt扩展名。

再然后我们github的项目地址那里,找到settings,打开它,在
Custom domain 那里输入你的自定义域名,顺便把下面的强制启用https勾上吧。

再然后我们回到本地,切换到hexo目录,hexo g 然后hexo d,将我们刚才新建的CNAME文件提交上去。稍微等待一下,我们就可以用我们的自定义域名访问我们的hexo博客啦。

教程写的比较乱,大家将就着看。毕竟现在已经深夜2点多了,大脑比较迟钝。

其实hexo部署完了以后,还有 很多后续 工作需要去完成。后面我也会慢慢去熟悉这些操作,如果有时间的话也会记录一些操作 教程。

1 条留言  访客:0 条  博主:1 条

评论加载中,请稍等...

发表评论

昵称*

邮箱*

网址