为新生小白准备的从零开始Blog搭建

为新生小白准备的从零开始Blog搭建

十二月 22, 2021

环境需要

域名

!!! hostname 阿里云腾讯云都可以,注册个号买个喜欢的域名,比如我的:xibai.xyz

本地本机环境

  • Git
  • nodejs

!!! local_env 以上两者在前文 环境配置 中有写。

云端博客环境

!!! blog_server 以下两者二选一或全选

可选:GitHub

注册账号,邮箱用自己的大号邮箱,权当大号用就行。因为未来你很可能也是GitHub重度用户之一

注册完毕之后,为博客新建一个仓库。

github-1

仓库命名:个人GitHub用户名.github.io.git

github-2

接下来打开终端,执行以下命令:

1
ssh-keygen -c '你的 GitHub 邮箱地址'

后面一路全按回车。执行完毕之后进入 C:\\Users\\你的电脑本地用户名\\.ssh

github-3

将pub文件中的内容复制粘贴,然后去GitHub的个人设置中,添加 SSH公钥 :

github-4
github-5

下图中 1 的位置是让你以后管理公钥的时候知道这个公钥是干啥的,就好比文件名or标签名,随便起,你能记住作用就行2 的位置粘贴刚刚复制的公钥内容,这里注意一下:如果邮箱末尾存在回车,就把这个末尾的回车删掉

github-6

添加完公钥之后测试功能是否正常,打开终端,执行命令:ssh git@github.com 。如果是以下回显则说明功能正常:

1
2
Hi 你的GitHub用户名! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

为blog仓库配置自己购买的域名:

github-7
github-8

下图123的解析:

  • 记录类型:选 CNAME
  • 主机记录:可以在你买的域名的基础上设置二级域名
  • 记录值:你设置的域名所要解析到的目标主机(这里就是你的github的blog仓库:你的github用户名.github.io
    github-9

可选:云服务器

首先需要先去买一台云服务器。此时此刻,我写下这句话时,腾讯云为抢占客户实施大促销,2核4G;80G云盘;10M带宽的云服务器222软妹币/3年。没有遇到促销的可以选择腾讯云or阿里云的学生优惠。

修改超级管理员账户 root 的密码为自己记得住的密码,初始密码为随机密码。

aliyun-blog-server-1

记得设置服务器的安全组规则or防火墙规则,开放基础端口,比如 80443

aliyun-blog-server-2

将自己的域名解析到刚买的云服务器:

aliyun-blog-server-11

环境配置

通过 SSH 连接上去,开始按以下顺序执行命令:

1
apt update && apt upgrade -y

aliyun-blog-server-3

  1. nginx,git 安装
1
apt install git nginx -y
  1. nodejs 安装

注意这里执行的命令中,https://deb.nodesource.com/setup_??.x 有两个问号,这里问号代表版本,写到这里时,官网已经出到了第17版

1
curl -fsSL https://deb.nodesource.com/setup_??.x | sudo -E bash -

aliyun-blog-server

接下来执行红线画住的命令:

1
2
3
4
5
apt-get install gcc g++ make
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null
echo "deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
apt-get update && sudo apt-get install yarn
apt-get install -y nodejs

aliyun-blog-server

  1. 配置 git 用户
  • 添加 git 用户
1
adduser git

aliyun-blog-server-6

  • 设置 git 用户权限
1
vim /etc/sudoers

aliyun-blog-server-7

在上图位置添加 git ALL=(ALL:ALL) ALL:(vim下,先按一下 i 才能编辑,编辑完毕后按 Esc,退出编辑模式)

然后通过以下组合键保存退出:
先按 shift+
此时左下角会出现如图所示的小冒号:

aliyun-blog-server-8

然后依次键入:wq!,回车保存退出

  • 配置 SSH 免密登录
    切换到 git 用户: su git
    创建 .ssh 文件夹:mkdir /home/git/.ssh
    然后将本机的 SSH公钥 写入到该目录中:scp C:\\Users\\你的本地电脑用户名\\.ssh\\id_rsa.pub git@你的服务器ip或者绑定的域名:~/.ssh/authorized_keys

aliyun-blog-server-9

  1. 配置 nginx

新疆博客网站对应的配置文件

1
vim /etc/nginx/conf.d/blog.conf

输入以下内容:

1
2
3
4
5
6
7
server{
listen 80;
root 这里填博客目录存放的地址(如:/var/www/blog);
server_name 这里填你的博客域名;
location /{
}
}

然后删除nginx的默认页面创建上面配置文件中写的博客目录文件夹执行以下命令:

1
rm -rf /var/www/html && mkdir /var/www/blog
  1. 创建git仓库并建立一个git仓库的钩子(hook)
1
2
3
git init --bare blog.git
echo 'git --work-tree=配置nginx时设置的文件夹目录路径 --git-dir=/home/git/blog.git checkout -f' > ~/blog.git/hooks/post-receive
chmod +x ./blog.git/hooks/post-receive

aliyun-blog-server-10

Hexo —— 本地Blog框架

安装

配置好 nodejs 环境和 npm 代理之后,一键安装:

1
npm install -g hexo-cli

安装 Hexo 完成后,请到想要存放博客文件目录的地方打开终端执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
hexo init <folder>
cd <folder>
npm install

新建完成后,指定文件夹的目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
文件名 作用
_config.yml 网站的 配置 信息,您可以在此配置大部分的参数。
package.json 应用程序的信息。EJS, StylusMarkdown renderer 插件已默认安装,您可以自由移除。
scaffolds 模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。
source 资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件(夹)和隐藏的文件将会被忽略。MarkdownHTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
themes 主题 文件夹。Hexo 会根据主题来生成静态页面。

配置

先在blog目录下安装两个插件,在这里打开终端执行:

1
2
npm install hexo-deployer-git --save
npm install hexo-server

可以在 _config.yml 中修改大部分的配置。

具体的详细信息参考官网文档:https://hexo.io/zh-cn/docs/configuration

这里给出我用的默认配置,记得修改关键信息为自己:

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 汐白的学习档案
subtitle: '小萌新一枚QAQ'
description: '这里是正在努力追赶大佬的小可爱QAQ嘤嘤嘤'
keywords: 萌萌哒の汐小白
author: Xibai
language: Zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://自己的博客域名
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: true # Transform title into titlecase
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
filename_case: 0
render_drafts: true
post_asset_folder: true
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: false
preprocess: true
line_number: true
tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 6
order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# 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-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: 自己选自己喜欢的主题,要先下载

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo:
github: git@github.com:自己的github用户名/自己的github用户名.github.io.git
aliyun: git@自己的博客服务器域名:/home/git/blog.git
baranch: main

使用

在本地blog目录下打开终端:

  • hexo clean:清除本地历史生成的网站文件(其实就是清楚本地blog网站缓存)
  • hexo g :生成blog网站文件
  • hexo d :将本地的blog网站文件推送至云端
  • hexo s :在本地启动一个blog云端模拟环境,可以在本地先查看blog生成后的样子

一般就是运行:

1
2
hexo clean
hexo g -d
隐藏