技术萌新搭建个人博客 GitHub+Hexo+绑定域名

发布 : 2019-05-18 分类 : web前端 浏览 :

背景

最近因服务器到期了,续费又要很大一笔费用,但是个人博客还部署在云服务器上,不续费了那就意味着博客就不能玩了。所以我就寻思着有没有免费搭建个人博客的系统,于是我上网查找,果然有一个叫hexo的博客系统,它可以快速帮我们搭建自己的个人博客,不需要部署到自己服务器,而是直接提交到GitHub,利用GitHub Pages帮我们渲染,这样岂不是太好了,正符合我的想法,于是我二话不说,就开始着手搭建hexo个人博客了。

准备安装软件

1. 安装nodejs

2. 安装git

注册GitHub

1. 访问github.com右上角signup

uername 最好都用小写,因为最后建立的博客地址是:http://username.github.io;邮箱十分重要,GitHub 上很多通知都是通过邮箱的。

创建Repository


配置和使用Github

1. 进入git bash 窗口

配置SSH keys

ssh keys是用来使本地git 项目与github联系

1. 检查SSH keys的设置

检查本地已有的ssh文件,若果没有则需要生成ssh文件

1
ll ~/.ssh

2. 生成新的 SSH Key

1
2
3
$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>

在git bash输入以上命令,然后系统会提示你输入密码:

1
2
Enter passphrase (empty for no passphrase):<设置密码>
Enter same passphrase again:<再次输入密码>

注意:输入密码的时候没有输入痕迹的,不要以为什么也没有输入。

3. 添加SSH Key到GitHub

进入~/.ssh目录,找到id_rsa.pub文件,用编辑器打开,然后进入github设置主页

Title最好写,随便写。网上有说不写title也有可能后期出现乱七八糟的错误
Key部分就是放刚才复制的内容啦 点击Add SSH key

4. 测试ssh

在git bash 输入以下命令:

1
$ ssh -T git@github.com

如果得到以下反馈

1
2
3
The authenticity of host 'GitHub.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)

输入yes回车

1
Enter passphrase for key '/c/Users/lenovo/.ssh/id_rsa':

输入刚才设置的密码回车,就会出现以下界面,则意味这ssh文件安装成功

5. 设置用户信息

1
2
git config --global user.name "wuyalan"//输入注册时的username
git config --global user.email "alan.wyl@foxmail.com"//填写注册邮箱

搭建hexo博客

利用npm命令安装hexo

1
2
cd
npm install -g hexo

1. 创建独立博客项目文件夹

安装完成后,关掉前面那个 Git Bash 窗口。在本地创建一个与 Repository 中博客项目同名的文件夹(如E:\http://username.github.io)在文件夹上点击鼠标右键,选择 Git bash here;

【提示】在进行博客搭建工作时,每次使用命令都要在 H:\http://username.github.io 目录下。

1
hexo init

2. 安装依赖包

1
npm install

3. 确保git部署

1
npm install hexo-deployer-git --save

4. 本地查看

现在已经搭建好本地的 Hexo 博客了,执行完下面的命令就可以到浏览器输入 localhost:4000 查看到啦

1
hexo g && hexo s

hexo g 每次进行相应改动都要hexo g 生成一下
hexo s 启动服务预览

5. 主题更换

执行完 hexo init 命令后会给一个默认的主题:landscape,如果你想更换其他主题,可以去官网找,这里我在github上找了一个主题。

1
git clone +复制的地址+themes/archer

后面就是clone之后放到你本地的博客文件夹themes文件夹下 名字纹archer的文件 我下载的是archer主题~

6. 修改整站配置文件

博客主要配置文件是 _config.yml ,可以用记事本打开,推荐使用 sublime 或者nodepad++打开。
修订清单如下,文档内有详细注释,可按注释逐个修订

  • 博客名字及作者信息:_config.yml
  • 个人介绍页面:about.md
  • 代表作页面:milestone.md

这里贴一份网上看到的 可以复制替换原来的 但是替换之前最好备份 可能会出错
那要么你就对照着看一下改就好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
# Hexo Configuration
## Docs: http://zespia.tw/hexo/docs/configure.html
## Source: https://github.com/tommy351/hexo/

# Site 这里的配置,哪项配置反映在哪里,可以参考我的博客
title: My Blog #博客名
subtitle: to be continued... #副标题
description: My blog #给搜索引擎看的,对网站的描述,可以自定义
author: Yourname #作者,在博客底部可以看到
email: yourname@yourmail.com #你的联系邮箱
language: zh-CN #中文。如果不填则默认英文

# URL #这项暂不配置,绑定域名后,欲创建sitemap.xml需要配置该项
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories

# Writing 文章布局、写作格式的定义,不修改
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
max_open_file: 100
filename_case: 0
highlight:
enable: true
backtick_code_block: true
line_number: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives 默认值为2,这里都修改为1,相应页面就只会列出标题,而非全文
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
category: 1
tag: 1

# Server 不修改
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
logger: false
logger_format:

# Date / Time format 日期格式,可以修改成自己喜欢的格式
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-M-D
time_format: H:mm:ss

# Pagination 每页显示文章数,可以自定义,贴主设置的是10
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Disqus Disqus插件,我们会替换成“多说”,不修改
disqus_shortname:

# Extensions 这里配置站点所用主题和插件,暂时默认
## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
## Themes: https://github.com/tommy351/hexo/wiki/Themes
theme: landscape
exclude_generator:
plugins:
- hexo-generator-feed
- hexo-generator-sitemap

# Deployment 站点部署到github要配置
## Docs: http://zespia.tw/hexo/docs/deploy.html
deploy:
type: git
repository:
branch: master

7. 启用新下载的主题

在刚打开的的_config.yml 文件中,找到“# Extensions”,把默认主题 landscape 修改为刚刚下载下来的主题名:

【提示】http://username.github.io 里有两个 config.yml 文件,一个在根目录,一个在 theme 下,现在修改的是在根目录下的。

8. 更新主题

git bash 里执行

1
2
cd themes/主题名
git pull

9. 本地查看调试

每次修改都要hexo g 生成一下

1
2
hexo g #重新生成
hexo s #启动本地服务,进行文章预览调试,退出服务用Ctrl+c

浏览器输入

localhost:4000 预览效果

将博客部署到github

1. 复制SSH码

进入 Github 个人主页中的 Repository,复制新建的独立博客项目:http://username.github.io 的 SSH 码

2. 编辑整站配置文件

打开项目目录下_config.yml文件,将刚刚复制的SSH码粘贴到“repository:”后面

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

[注意]冒号后面必须要加空格,否则会报错。

3.完成部署

每次修改本地文件后,需要 hexo g 才能保存。每次使用命令时,都要在你的博客文件夹目录下

1
hexo g && hexo d

部署好了然后再浏览器输入你的用户名+github.io,如果得到你想要的效果,那么恭喜你博客已经搭建成功了!

绑定域名

1. 申请域名/域名解析(阿里云,腾讯云,万网)

控制台->域名->域名列表->解析

添加一条CNAME类型的记录,记录值是 username.github.io(username是你的GitHub用户名)
再添加一条A类型的记录,记录值是你的GitHub Pahes域名的ip地址,可通过ping命令获取


2. 配置CNAME

在source文件夹下建立一个CNAME的文件,文件内容为你的域名,然后发布到GitHub;进入GitHub项目地址,点击Settings,找到 Custom domain 添加域名。

你还可以在 GiHub Pages 仓库的设置里勾选 ‘Enforce HTTPS’,这样所有访问你站点的请求都会走 HTTPS。

3. 域名访问

以上配置成功后,你就可以使用自定义域名访问你的博客了,快去试试吧!

注:域名可以不用备案

结语

如果以上步骤都顺利完成后,那么恭喜你已经成功搭建好博客了,是不是很开心呀!

知识 & 情怀 | 二者兼得

微信扫一扫, 向我投食

微信扫一扫, 向我投食

支付宝扫一扫, 向我投食

支付宝扫一扫, 向我投食

留下足迹