ljj17173

Github+Hexo的个人博客网站的搭建历程(一)—开始
1. 开头最近正想着建立一个博客网站,虽然有HTML,CSS的基础,但是对于建站的流程,需要什么都一无所知,看了不...
扫描右侧二维码阅读全文
30
2018/01

Github+Hexo的个人博客网站的搭建历程(一)—开始

1. 开头

最近正想着建立一个博客网站,虽然有HTML,CSS的基础,但是对于建站的流程,需要什么都一无所知,看了不少的百度,知乎上的解答之后渐渐总结出了两个自建Blog的方法

•第一种是用 服务器+worldpress 的动态网页Blog系统,优点是用的动态网页可以直接管理和更新,插件和主题丰富,缺点是对服务器要求较高,需要会点数据库,网上插件质量参差不齐,需要花时间和精力去优化和修改

•第二种是用 Github提供的HTML Blog空间+hexo来实现一个可以管理的个人博客站点。优点是使用的静态网页,对服务器压力小,用Hexo建立网站框架并部署,省时省力,主题不多但也够用了。维护也相对简单。缺点是不适合实时更新的Blog,插件,主题相对其他的要少一些

考虑到用第二种方法可以不需要自己建服务器,而且网页也不是时时更新,部署简单,有个github域名,还省钱,很快就抛弃了worldpress用第二种方法了

实际上一开始我是使用的worldpress的,用的自己家里的设备来充当服务器,弄了好久,终于弄好了,最后想要上线网站的时候才发现,自己的家的网络不仅仅是动态IP,而且还处在内网中,辛辛苦苦注册了个 花生壳 ,最后发现还需要内网穿透才能链接外界,还得花钱,还有穿透流量限制,还得开着花生壳客户端……. 无奈去买个VPS用呗,最低的一个月也要10元钱,一个月需要120元,还没带域名呢….. 我一个没多少人看的Blog干嘛要弄得那么破费?最后还是不用worldpress了。

2. 开始部署(Hexo和Github的安装和配置)

1. Hexo的安装

需要先安装以下应用程序:(windows下都有安装包可直接安装,也可使用其他的方法)
Node.js
Git
之后你可以打开Git Bash进行相应的操作:
安装完成后使用npm进行 hexo的安装。
输入:

$ npm install -g hexo-cli

2. 建立Blog所需文件

相关命令:

$ hexo init <folder>
$ cd <folder>
$ npm install

比如说你想建立网站相关文件在D盘Blog文件夹(D;/Blog)
输入命令:

$ hexo init d:/Blog
$ cd d:/Blog
$ npm install

在blog文件夹下将会生成网站所需的相关文件
其中的文件和文件夹都有其对应的作用,请详记:

├── _config.yml //网站的相关配置的文件(包括标题,重要内容等)
├── package.json //npm相关
├── scaffolds//模板文件夹(文章模板)
├── source//资源文件夹(很多文章资源,网站所用图片等元素应存放于此)
| ├── _drafts
| └── _posts
└── themes //主题文件夹(hexo的主题将存放在此)

详细文件或文件夹的具体含义见 Hexo官方文档

3. 本地部署完成

此时你已经可以预览你在本地部署的网站了,做法是输入:

$ hexo server

这条指令将启动本地服务器,并且会监视你对网页文件的变动进行改动
在浏览器输入http://localhost:4000 即可访问你建立好的网站。

3. 创建Github账号

1. 访问Github官网,进行账号注册

Github guides上学习如何建立一个库和如何管理,之后可以直接百度Github教程,因为你还需要快速学会如何使用git来管理你的库,所以不需要马上去翻阅详细的官方教程

2. 建立一个和自己账户名相同的库(Repository)

建立库比较简单,不会的话请重新翻阅git教程或者Github guides
<font color=#ff00>※注意:库名称必须与你的账户名同名,这样这个库就会自动的开通HTML网页功能</font>

3. 创建一个SSH密匙

创建SSH的原因是增加账户的安全,避免频繁的使用明文密码登录
Git输入:

ssh-keygen -t rsa -C "邮箱"

其中双引号内输入你的邮箱
比如你的邮箱是12345@qq.com
那么你应输入:

ssh-keygen -t rsa -C "12345@qq.com"

一路按回车,之后你将会看到生成成功提示:

Your identification has been saved in /c/Users/Administrator/.ssh/id_rsa.
Your public key has been saved in /c/Users/Administrator/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:N20m0PnwfNSZZaCOvp8gW8Fac49kIQo1fUMz+490AO8 “12345@qq.com
The key's randomart image is:
+---[RSA 2048]----+
|        o. .= ..o|
|       . o..oB o+|
|      . . =.+.+o.|
|       . + X = . |
|        S X % E .|
|         = @ = + |
|        o + . o .|
|         + o .   |
|        . ..o    |
+----[SHA256]-----+

<font color=#ff00>这时候注意一下提示代码中,我标第1、2行的部分:</font>

写的是你的SSH文件已经在[c盘>用户>自己的用户名>.ssh]目录下生成好了。
你需根据上方的路径要找到并并用记事本打开 id_rsa.pub文件,并复制里面的内容

接下来打开GitHub官网,进入你账号的个人设置,在个人设置右侧菜单中找到SSH Keys点击,点击ADD SSH key。
title可以随便写,将刚才复制的内容粘贴到Key框中,点击ADD Key 即添加了SSH登录。

这时你可以使用Git测试你的SSH是否配置成功
输入:

ssh -T git@github.com

如果显示:

Hi username! You've successfully authenticated, but GitHub does not
provide shell access.

那么恭喜你,SSH配置完成!

4. 配置一下Git

我们实际上还没有在Git中添加你的账号信息,我们应该添加一下
输入:

git config --global user.name "username"
git config --global user.email "email"

<font color=#ff00>※username中填入你的账户名,email中填入你的账户邮箱</font>

输入git config --list如果看到了你填入的信息,那么信息配置成功

5. 发布网站到GitHub

接下来我们将把刚生成的网站发布到你的库中
首先,打开你建立的Blog文件夹中的_config.yml文件,在底部找到下面的位置

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy: 
type: git
repo: git@github.com:MyGithub/MyGithub.github.io

你将填写type和repo部分:
如上面黄字<font color=#ff00>(※将repo部分中的MyGithub改成你的账户名)</font>

接下来发布网页到Git:
在Git中输入如下指令:(需要在你网站目录下输入该指令)

<font style="font-size: x-small;">指向目录使用cd 你的网站文件夹路径</font>

$ hexo clean
$ hexo generate
$ hexo deploy

好,至此你已经将网站上传至你的账户库中
你现在可以访问 http://MyGithub.github.io 来看到你上传的网站了
※MyGithub改成你的账户名

相关资料:

Hexo安装官方文档: https://hexo.io/zh-cn/docs/index.html
Git的使用: http://www.runoob.com/w3cnote/git-guide.html

Last modification:January 24th, 2019 at 05:43 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment