logo头像

技术是一种信念

使用GitHub+Hexo搭建免费博客

其他 hexo github 2018/05/10

搭建博客

创建仓库

新建一个名为你的用户名.github.io的仓库，比如说，如果你的github用户名是test，那么你就新建test.github.io的仓库（必须是你的用户名，其它名称无效），将来你的网站访问地址就是 http://test.github.io 了，是不是很方便？

由此可见，每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。

几个注意的地方：

  1. 注册的邮箱一定要验证，否则不会成功；
  2. 仓库名字必须是：username.github.io，其中username是你的用户名；
  3. 仓库创建成功不会立即生效，需要过一段时间，大概10-30分钟；

创建成功后，默认会在你这个仓库里生成一些示例页面，以后你的网站所有代码都是放在这个仓库里啦。

配置SSH key

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

1
$ cd ~/. ssh #检查本机已存在的ssh密钥

如果提示：No such file or directory 说明你是第一次使用git。

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

然后点击回车，接下来会提示输入密码，如果不设置密码则直接继续按两次回车即可，如果设置了则会提示再次输入密码确认。最终会生成一个文件在用户目录下，打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容，打开你的github主页，进入个人-> SETTINF -> SSH and GPG keys -> New SSH key，然后把复制的内容到key那里，title随便填，保存。

测试是否成功

1
$ ssh -T git@github.com # 注意邮箱地址不用改

如果提示Are you sure you want to continue connecting (yes/no)?，输入yes，然后会看到：

Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access.

看到这个信息说明SSH已配置成功！

使用hexo写博客

hexo简介

Hexo是一个基于 Github Pages 的博客发布工具，支持Markdown格式。

官网： http://hexo.io
github: https://github.com/hexojs/hexo

注意事项

安装之前先来说几个注意事项：

  1. 很多命令既可以用Windows的cmd来完成，也可以使用git bash来完成，但是部分命令会有一些问题，为避免不必要的问题，建议全部使用git bash来执行；
  2. hexo不同版本差别比较大，网上很多文章的配置信息都是基于2.x的，所以注意不要被误导；
  3. hexo有2种_config.yml文件，一个是根目录下的全局的_config.yml，一个是各个theme下的；

安装

1
npm install -g hexo

初始化

在电脑的某个地方新建一个名为hexo的文件夹（名字可以随便取），比如我的是F:\hexo，由于这个文件夹将来就作为你存放代码的地方，所以最好不要随便放。创建好文件之后，执行下面命令：

1
hexo init

hexo会自动下载一些文件到这个目录，包括node_modules，目录结构如下：

1
2
3
4
5
6
7
8
9
10
.deploy_git
node_modules  #hexo需要的模块，不需要上传github
pubilc   #生成的静态页面
scaffolds  #
source     #博文md文件
themes     #主题文件
.gitignore #hexo默认生成的.gitignore
_config.yml   #全局配置文件
db.json
package.json   #记录hexo需要的包信息

1.hexo帮助把博客发送到github，同时把md文件转换成网页文件。

2.hexo目录下的文件和github上的文件是不同的，public文件夹的文件通过hexo d 上传到github去了，其他的文件则留在本地目录下。 

1
hexo g # 生成

执行以上命令之后，hexo就会在public文件夹生成相关html文件，这些文件将来都是要提交到github。

1
hexo s # 启动服务

hexo s是开启本地预览服务，打开浏览器访问 http://localhost:4000 即可看到内容，很多人会碰到浏览器一直在转圈但是就是加载不出来的问题，一般情况下是因为端口占用的缘故，因为4000这个端口太常见了，解决端口冲突问题:

1.按下Win+R调出命令行窗口，输入netstat -aon|findstr “4000”，找到指定行最后一列的数字（PID），我们这里是xxxx.
2.输入tasklist|findstr “xxxx”，发现是javaw.exe占用了4000端口。
3.再次输入taskkill /f /t /im javaw.exe结束该进程。

修改主题

第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章，但是默认主题的样式个人觉得不是很喜欢。可以从Hexo官方主题 找一个自己喜欢的主题。在这里使用的是 ASnippet。

下载之后，把主题放在F:\hexo\themes，然后再_config.yml中把修改为:

1
theme: snippet

重新发布之后就可以看到新的主题的样子啦。

avatar

上传到github

如果你一切都配置好了，发布上传很容易，一句hexo d就搞定，当然关键还是你要把所有东西配置好。

首先，ssh key肯定要配置好。

其次，配置_config.yml中有关deploy的部分：

正确写法：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:liuxianan/liuxianan.github.io.git
  branch: master

此时直接执行hexo d的话一般会报如下错误：

1
Deployer not found: github 或者 Deployer not found: git

原因是还需要安装一个插件：

1
npm install hexo-deployer-git --save

其它命令不确定，部署这个命令一定要用git bash，否则会提示Permission denied (publickey).

打开你的git bash，输入hexo d就会将本次有改动的代码全部提交，没有改动的不会。

常见命令

常用hexo命令

常见命令

1
2
3
4
5
6
7
hexo new /  hexo n "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate /hexo g #生成静态页面至public目录
hexo server / hexo s  #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy / hexo d #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

组合命令：

1
2
hexo s -g #生成并本地预览
hexo d -g #生成并上传

写博客

可以直接使用命令hexo n "postName"，当然也可以直接在_posts文件夹下面创建.md文章。

博客模板一般为：

1
2
3
4
5
6
7
8
9
---
title: postName #文章页面上的显示名称，一般是中文
date: 2013-12-02 15:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意:后面有个空格
description: 附加一段文章摘要，字数最好在140字以内，会出现在meta的description里面
---

以下是正文

哈，这里推荐一个觉得不错的markdown的编辑器Typora。

扩展功能

代码高亮

  • 首先在hexo根目录下面的_config.yml 把代码的自动检测打开。
1
2
3
4
5
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:
  • 然后再主题的_config.yml 指定代码高亮的样式即可。
1
highlightTheme: normal

评论

我们可以看到很多博客其实都是可以进行评论的，那么接下来看一下如何在博客中引入评论。这里我们使用的是来必力。

再注册成功之后，在都应的主题的_config.yml中加入如下配置即可：

1
2
3
livere:
  enable: true
  livere_uid: xxxx  #这里填写的是在来比力注册之后给的uuid

在引入之后重新发布，这里如果页面底部出现空白不要着急，耐心等待一下，那个是来比力正在加载。

文章加密访问

这里使用的博客加密访问的方式为hexo-blog-encrypt。 关于该插件的具体使用的方法可以查看hexo-blog-encrypt官方文档

添加博客访问统计

  • 首先在引入博客首页的copy-right的所在的copyright.ejs中引入js。
1
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

注意这里使用的主题是snippet，不同的主题copy-right所在的文件可能不一样。

  • 在copy-right之前加入本站访客数，然后重启即可了。
1
2
3
4
5
6
<div class="powered-by">
				<i class="fa fa-user-md"></i>
				<span id="busuanzi_container_site_uv">
					本站访客数:<span id="busuanzi_value_site_uv"></span>
				</span>
			</div>

多个分支提交博客

创建分支

1
git branch  hexo

更改默认分支

在Github的username.github.io仓库上新建一个hexo分支，并切换到该分支，并在该仓库->Settings->Branches->Default branch中将默认分支设为hexo，save保存。

切换分支并拷贝文件

首先把F:/hexo下面的所有文件都复制上，然后再git bash中运行如下命令，切换到hexo分支：

1
git checkout hexo

然后把刚刚复制的文件都拷贝的当前文件夹下面。

  • 将themes目录以内中的主题的.git目录删除（如果有），因为一个git仓库中不能包含另一个git仓库，提交主题文件夹会失败。
  • 可能有人会问，删除了themes目录中的.git不就不能git pull更新主题了吗，很简单，需要更新主题时在另一个地方git clone下来该主题的最新版本，然后将内容拷到当前主题目录即可

提交分支

再提交分支之前，记得把本地的库和远程的库建立关联

1
git remote add origin git@github.com:xx/xxx.git   #具体的仓库地址

执行git add .、git commit -m 'back up hexo files'（引号内容可改）、git push origin hexo即可将博客的hexo部署环境提交到GitHub个人仓库的hexo分支。

其他电脑

克隆仓库到本地

至此，你的博客已经可以在其他电脑上进行同步的维护和更新了，方法很简单：

  • 将新电脑的生成的ssh key添加到GitHub账户上

  • 在新电脑上克隆username.github.io仓库的hexo分支到本地，此时本地git仓库处于hexo分支

    1
    2
    3
    git init   #初始化仓库
    git remote add origin git@github.com:xx/xxx.git   #具体的仓库地址
    git fetch origin hexo   #把分支克隆到本地
  • 切换到hexo目录，执行npm install(由于仓库有一个.gitignore文件，里面默认是忽略掉 node_modules文件夹的，也就是说仓库的hexo分支并没有存储该目录[也不需要]，所以需要install下)

更新博客

依次执行git add .、git commit -m 'back up hexo files'（引号内容可改）、git push指令，保证hexo分支版本最新

执行hexo d -g指令（在此之前，有时可能需要执行hexo clean），完成后就会发现，最新改动已经更新到master分支了，两个分支互不干扰！

注意： 每次换电脑进行博客更新时，不管上次在其他电脑有没有更新，最好先git pull

提交博客

​ 按照之前的方法写自己博客， 然后将目录切换下username.github.io下，此时需要安装一下npm install， 最后执行hexo g、hexo s、hexo d等命令即可提交成功

参考博文

转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © Snippet
本站访客数:
Copyright © 2018 | Powered by Cheryl | Theme by Snippet