ubuntu+github+hexo 搭建自己的博客

Hexo 在本地搭建一个博客

详解从部署到域名解析访问

新增分流访问方法

安装 Hexo

  1. 安装 nodejs

    http://nodejs.cn/ 丢个链接自己装,傻瓜式安装

    或者命令行安装

    1
    sudo apt install nodejs
  2. 安装 git

    下载安装 https://git-scm.com/downloads

    命令行安装

    1
    sudo apt install git
  3. 使用 npm 安装 Hexo

1
2
3
4
5
6
7
8
9
10
11
12
13
#安装npm工具(不知道干什么用的去百度)
sudo apt install npm
#为npm更换国内淘宝镜像
sudo npm config set registry https://registry.npm.taobao.org
#检测是否更换成功
sudo npm config list
#全局安装n管理器(用于管理nodejs版本)
sudo npm install n -g
#安装最新的nodejs(stable版本)
sudo n stable
sudo node -v
#安装hexo
npm install -g hexo-cli

快速开始

1 找个文件夹下打开终端,输入

1
2
3
4
hexo i blog //init的缩写 blog是项目名
cd blog //切换到站点根目录
hexo g //generetor的缩写
hexo s //server的缩写

2 打开浏览器输入 localhost:4000 查看:

看到页面就说明成功了,这个就是 hexo 默认的博客主题。现在你已经可以在这个主题下写博客了。

当然,我是不喜欢这样的,幸好,github 上有大量的主题可供选择,这里我选择使用 nexT 主题。

选择主题–nexT

1 . 在站点根目录输入

1
git clone https://github.com/iissnan/hexo-theme-next themes/next11

2 . 完成后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next

配置文件就是根目录下的_config.yml 文件

image

把 landscape 改为 next

3 . 在终端输入

1
2
3
4
hexo clean  #清除缓存
hexo g #重新生成代码
hexo s #部署到本地
#然后打开浏览器访问 localhost:4000 查看效果

预览

nexT 主题有三种选择,这个只是最简洁的一种,我们选择最好看的那个。

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏外观
  • Pisces - 双栏 Scheme,小家碧玉似的清新

4 . 配置 nexT

next主题

在 站点根目录 /themes/next/_congig.yml 文件中修改

然后重新 clean,generator,查看效果:

这里写图片描述

当然,你完全可以进行很多的自定义设置甚至修改源码,定制自己的主题。更多的设置请移步官方文档

http://theme-next.iissnan.com/theme-settings.html

将本地博客上传到 github

话不多做,直接开始。

1 . 注册 github 账号

https://github.com/ 甩个链接自己看着办

2 . 创建一个新项目

这里写图片描述

3 . 按格式输入项目名称

这里写图片描述

注意规范!!

4 . 点击设置 创建一个 page

创建


这里写图片描述


这里写图片描述

5 . 选择一个主题,没什么用,反正马上就被覆盖掉了。。

这个时候访问一下你的链接,应该可以看到效果:

接下来将我们 Hexo 的代码部署到 github 上。

6 . 修改 hexo 站点的配置文件

这里写图片描述

deploy:
type: git
repository: git@github.com:tsvico/tsvico.github.io.git
branch: master

// 相关地址改成自己的

改成这样就好了,记得保存。

注意!!!冒号的后面一定一定一定要有一个空格!!

7 . 部署一下就好了

1
2
3
npm install hexo-deployer-git --save
//先装个插件压压惊
hexo d // 部署的命令

这里可能会让你输入账号密码,如果输入后依旧上传不成功

你需要配置秘钥访问 github

由于你的本地 Git 仓库和 GitHub 仓库之间的传输是通过 SSH 加密的,所以,需要一点设置:

第 1 步:创建 SSH Key。在用户主目录下,看看有没有.ssh 目录,如果有,再看看这个目录下有没有 id_rsaid_rsa.pub 这两个文件,如果已经有了,可直接跳到下一步。如果没有,打开 Shell(Windows 下打开 Git Bash),创建 SSH Key:

1
$ ssh-keygen -t rsa -C "youremail@example.com"

你需要把邮件地址换成你自己的邮件地址,然后一路回车,使用默认值即可,由于这个 Key 也不是用于军事目的,所以也无需设置密码。

如果一切顺利的话,可以在用户主目录里找到.ssh 目录,里面有 id_rsaid_rsa.pub 两个文件,这两个就是 SSH Key 的秘钥对,id_rsa 是私钥,不能泄露出去,id_rsa.pub 是公钥,可以放心地告诉任何人。

第 2 步:登陆 GitHub,打开 “Account settings”,“SSH Keys” 页面:

然后,点 “Add SSH Key”,填上任意 Title,在 Key 文本框里粘贴 id_rsa.pub 文件的内容:

github-addkey-1

点 “Add Key”,你就应该看到已经添加的 Key:

github-addkey-2

为什么 GitHub 需要 SSH Key 呢?因为 GitHub 需要识别出你推送的提交确实是你推送的,而不是别人冒充的,而 Git 支持 SSH 协议,所以,GitHub 只要知道了你的公钥,就可以确认只有你自己才能推送。

当然,GitHub 允许你添加多个 Key。假定你有若干电脑,你一会儿在公司提交,一会儿在家里提交,只要把每台电脑的 Key 都添加到 GitHub,就可以在每台电脑上往 GitHub 推送了。

最后友情提示,在 GitHub 上免费托管的 Git 仓库,任何人都可以看到喔(但只有你自己才能改)。所以,不要把敏感信息放进去。

再次访问你的网站:

https:// 用户名.github.io

perfect!

发布你的第一篇博客

根目录下输入 :

1
2
3
4
hexo new "postName"
#hexo n 也可以
#你自己的博客名称,名为postName.md的文件会建在目
#录/blog/source/_posts下

文章编辑完成后,终端在根目录文件夹下,执行如下命令来发布:

1
2
hexo g //生成静态页面
hexo d //发布

现在查看一下:

https:// 用户名.github.io

已经发布上去咯。

主题相关

本次的教程就先到这里,这只是最基础的,对于主题,你还有更多的选择更多的设置,甚至自己写一个静态博客界面。撤了 Hexo,你还可以用其他的方式来搭建。如果你不喜欢 github 提供的域名,你可以自己买一个域名做绑定

https://hexo.io/themes/ 更多 hexo 主题

https://www.zhihu.com/question/24422335 知乎上的 hexo 主题

或者直接 github 搜 hexo

https://github.com/tsvico 我的 github

https://tsvico.github.io/ 我的博客主页

http://blog.peoplevip.cn/ 这个是解析后的地址

域名绑定

首先你得有一个域名,我用的腾讯的域名,因为我是学生,可以免费使用,不过需要实名认证和备案,挺麻烦的。

实名认证和备案都搞定以后。到域名解析页面添加一条解析:

这里写图片描述

然后到你博客 根目录 /source 目录下创建一个新文件 CNAME
在里面写上你刚刚配置的路径,比如我的是 blog.peoplevip.cn,就直接在 CNAME 文件中写上这个地址就好了。

然后执行以下 hexo g,hexo d,让后访问你自己的地址就可以跳转到博客了。


晚间更新

为了提高国内访问速度

采取了分流的方式将网站同时部署在 github 和 coding 上,部署过程大同小异,有两个关键点需要提一下

之前的 Hexo 博客目录下的站点配置文件_config.yml 中的部署配置为

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

现在更改为

1
2
3
4
5
6
deploy:
type: git
repo:
github: git@github.com:tsvico/tsvico.github.io.git #前边名字无所谓,自己能区分就可以
coding: git@git.coding.net:tsvico/tsvico.git
branch: master

大体格式就是这个样子,注意更改

解析是这样

image