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

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

十二月 22, 2021 (Updated: )

环境需要

域名

!!! 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防火墙规则，开放基础端口，比如 80 ，443 。

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, Stylus 和 Markdown renderer 插件已默认安装，您可以自由移除。
scaffolds 模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。
source 资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件(夹)和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 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
  1. 1. 环境需要
    1. 1.1. 域名
    2. 1.2. 本地本机环境
    3. 1.3. 云端博客环境
      1. 1.3.1. 可选：GitHub
      2. 1.3.2. 可选：云服务器
        1. 1.3.2.1. 环境配置
  2. 2. Hexo —— 本地Blog框架
    1. 2.1. 安装
    2. 2.2. 配置
    3. 2.3. 使用
隐藏