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

tsvico Lv5
  2018-06-08 16:48:12 2018-06-08 16:48:12 创建   2019-06-27 14:07:36 2019-06-27 14:07:36 更新   1.9k 字  7 分钟  

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_rsa 和 id_rsa.pub 这两个文件，如果已经有了，可直接跳到下一步。如果没有，打开 Shell（Windows 下打开 Git Bash），创建 SSH Key：

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

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

如果一切顺利的话，可以在用户主目录里找到.ssh 目录，里面有 id_rsa 和 id_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.tbox.fun/ 这个是解析后的地址

域名绑定

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

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

这里写图片描述

然后到你博客 根目录 /source 目录下创建一个新文件 CNAME
在里面写上你刚刚配置的路径，比如我的是 blog.tbox.fun，就直接在 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

  • 标题: ubuntu+github+hexo 搭建自己的博客
  • 作者: tsvico
  • 创建于 : 2018-06-08 16:48:12
  • 更新于 : 2019-06-27 14:07:36
  • 链接: https://blog.tbox.fun/2018/c067e22a.html
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
目录
ubuntu+github+hexo 搭建自己的博客
  1. Hexo 在本地搭建一个博客
    1. 安装 Hexo
    2. 快速开始
    3. 选择主题–nexT
  2. 将本地博客上传到 github
  3. 发布你的第一篇博客
  4. 主题相关
  5. 域名绑定