好的代码像粥一样,都是用时间熬出来的

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

Hexo在本地搭建一个博客

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

新增分流访问方法

安装Hexo

  1. 安装nodejs

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

    或者命令行安装

    1
    2
    > sudo apt install nodejs
    >
  2. 安装git

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

    命令行安装

    1
    2
    > 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
2
> $ 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

坚持原创技术分享,您的支持将鼓励我继续创作!