更多►作业

RedRock_SRE_第一次课后作业

# Level 0 :

# the first step

1
cd Desktop/

# the second step

1
2
mkdir test_file
cd test_file/

# the third step

1
2
3
touch hello\ world.c
#touch 'hello world.c'
#touch "hello world.c"

# the fourth step

1
vim hello\ world.c

1
2
3
4
5
6
7
8
/*
Write the following code to 'hello world.c'
*/
#include <stdio.h>
void main()
{
	printf("hello redrock!");
}

# the fifth step

1
gcc hello\ world -o hello\ world

# the sixth step

1
./hello\ world

# the final display

level_1_display

这里输出的不是 hello, world ，但也差不多（doge）

# Level 1.1 :

# 一个简单的个人博客空间搭建

# 搭建方式：

Hexo + GitHub Page

# 材料（准备）：

工具类：git 、 hexo

环境类：Node.js 、 github

# 正式开始前的准备

# 首先，

要将 git 和 Node.js 从官网上下载到本地，过程这里不过多地赘述（node.js 建议下载长期支持版、git 则是下载最新版），（对于 windows 操作系统而言）下载好之后地两个程序并不是我们需要的材料本体，而是安装程序，如图：

NodeJs安装程序展示

点击执行安装程序后，除了安装路径以外，其他选项按照默认的一直点击 next 就行，但值得一提的是，对于新手来说，安装 git 时建议勾选上 “git bash here”，安装 Node.js 时遇到含有 PATH 选项时，一定要选择将其勾选上（自动帮你把 node.js 添加到环境变量），而且 node.js 相关工具包下载也建议勾选上；

# 其次，

在安装完成后，输入如下代码：

1
2
3
node -v  //  检查node.js版本信息
npm -v  //  检查Node包管理器的版本信息
git --version  //  检查git版本信息

若安装成功，则效果如下图（会出现版本信息），否则，应该是安装过程出了岔子，要重新安装一次：（）

检查版本信息

# 然后，

给 npm 设置成阿里的国内镜像：

1
npm config set registry https://registry.npm.taobao.org

利用 npm 在命令行中安装 hexo ，输入下面的代码

1
npm install hexo-cli -g  # 意思是用npm工具将hexo-cli包进行全局安装，使得在本地任何位置都能调用hexo-cli

同样的，安装完成后输入 hexo -v 检查安装是否成功，道理和效果图类似上方，完成之后，

开始配置 GitHub 相关；

若没有 github 账号，就到 （全球最大程序员交流交友平台） GitHub 官网去注册账号，注册成功后来到首页在右上角点击加号并新建一个 github 仓库（new repository）：

创建选项如下图：

创建GitHub仓库

# 重点，记录该仓库的地址 (网址)： https://github.com/Black-Skyline/Black-Skyline.github.io

另外，git 也需要提前配置一下，随便找个位置进入 git 命令行，然后输入：

1
2
3
4
5
6
7
8
9
10
# 配置用户名和邮箱
git config --global user.name "github 用户名"  
git config --global user.email "github 注册邮箱"
# 与github弄成同一个用户名方便管理，邮箱是全称，如：1234@qq.com

# 然后检查是否配置成功
git config -l
# 若出现有下面两行提示信息，则配置成功
user.email=···(上面配置的邮箱)
user.name=···(上面配置的用户名)

# 开始建站，

# 首先，

选择一个文件夹（或新建）作为博客网站在本地的存储位置，我的选择是："D:\HexoBlog\FirstBlog".

网站在本地的储存位置

# 然后，

进入此文件夹，在此处唤出 git 命令行（鼠标空白处右键 > Git Bash Here）, 输入以下命令完成初始化：

1
2
hexo init .
npm install

初始化成功效果如下：

1
2
3
4
5
6
7
8
$ hexo init .
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

$ npm install

up to date in 1s

# 紧接着，

这时当前文件夹里会自动生成一些文件和文件夹，初始化完成后就可以在本地测试效果了：

1
2
3
4
$ hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

hexo s 是开启本地的 Hexo 服务器的命令，这时可以打开浏览器，在地址栏中输入 localhost:4000 就可以看到本地的网页效果了。

效果大致如下：

效果测试

# 最后，

按 Ctrl+C 中断退出服务器的运行，至此，基础的模版页面便已经搭建好了。

# 注： hexo s 命令也可以换成 hexo server ，两者是等价的

# 生成静态文件

由于平台原因（GitHub Page 只支持静态页面和文件），所以在博客部署前需要先生成对应的静态文件，然后再将其部署到 GitHub

所需命令如下：

1
2
3
4
5
hexo clean
# 该命令是将上一次部署时生成的静态文件进行清除，防止在多次生成静态文件时缓存错误

hexo g
# 该命令等价于 hexo generate

效果如下：

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
$ hexo clean
INFO  Validating config
INFO  Deleted database.

$ hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 111 ms
INFO  Generated: archives/index.html
INFO  Generated: archives/2022/10/index.html
INFO  Generated: index.html
INFO  Generated: fancybox/jquery.fancybox.min.css
INFO  Generated: archives/2022/index.html
INFO  Generated: js/script.js
INFO  Generated: css/style.css
INFO  Generated: css/fonts/fontawesome-webfont.woff2
INFO  Generated: fancybox/jquery.fancybox.min.js
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: js/jquery-3.4.1.min.js
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: 2022/10/23/hello-world/index.html
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  17 files generated in 268 ms

此时当前文件夹下生成了一个 public 文件夹用于储存生成的静态文件，到时候部署也是部署这个文件夹上去；

另外，如果 hexo clean 命令生效，则效果如下：

1
2
3
4
$ hexo clean
INFO  Validating config
INFO  Deleted database.
INFO  Deleted public folder.

# 将文件部署到 GitHub Pages 上

为了更方便地完成部署，下载一个部署插件：

1
npm install hexo-deployer-git

然后，对网站存放的根文件夹 (我是 FirstBlog 文件夹) 里的 _config.yml 文件进行编辑配置：

（使用 VS code 或其他的文本编辑器打开，甚至是 window 自带记事本也可）

需要更改的原始代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:' '

把它们更改为如下格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Site
title: 黑色天际线的博客空间
subtitle: '测试版'
description: '此博客空间为个人学习笔记上传处'
keywords: 学习笔记
author: 寻光
# language: en
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://Black-Skyline.github.io

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/Black-Skyline/Black-Skyline.github.io
  branch: main
  message: Here comes the update

注：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
title: # 网站标题
subtitle: # 网站副标题
description: # 网站的描述
keywords: # 网站关键词
author: # 作者
language: # 语言种类
timezone: # 世界时区

url: # 使用Github Pages就要写成 'https://github的用户名.github.io'

deploy:
  type: git  # 部署方式
  repo: https://github.com/Black-Skyline/Black-Skyline.github.io # 仓库的地址(网址)
  branch: main  # 使用的github分支
  message: Here comes the update  # 每次部署成功后GitHub的仓库里出现的更新信息

完成后，保存退出编辑，并开始部署：

在 git 命令行中输入 hexo d 或 hexo deploy ，成功的效果如下：

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
$ hexo d
INFO  Validating config
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
warning: LF will be replaced by CRLF in 2022/10/23/hello-world/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2022/10/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2022/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in css/fonts/fontawesome-webfont.svg.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in css/style.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/jquery-3.4.1.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/script.js.
The file will have its original line endings in your working directory
On branch master
nothing to commit, working tree clean
Enumerating objects: 34, done.
Counting objects: 100% (34/34), done.
Delta compression using up to 12 threads
Compressing objects: 100% (26/26), done.
Writing objects: 100% (34/34), 882.38 KiB | 13.79 MiB/s, done.
Total 34 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), done.
remote:
remote: Create a pull request for 'master' on GitHub by visiting:
remote:      https://github.com/Black-Skyline/Black-Skyline.github.io/pull/new/master
remote:
To https://github.com/Black-Skyline/Black-Skyline.github.io
 * [new branch]      HEAD -> master
branch 'master' set up to track 'https://github.com/Black-Skyline/Black-Skyline.github.io/master'.
INFO  Deploy done: git

注：可能会失败几次，大概率是因为与 github 的网络通信不太稳定，所以可多尝试几次

部署成功后，GitHub 对应仓库的截图如下：

提交部署后的仓库截图

此时博客可以对外访问了，在网址栏输入 black-skyline.github.io 即可访问

# 建立一个备份

使用版本控制器 git 新建一个分支 backup 用于备份本地文件：

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
$ git init
Initialized empty Git repository in D:/HexoBlog/FirstBlog/.git/

用户名@git命令行名 /d/HexoBlog/FirstBlog (master)
$ git add .
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory

用户名@git命令行名 /d/HexoBlog/FirstBlog (master)
$ git commit -m "first commit in local branch master"
[master (root-commit) abc1925] first commit in local branch master
 11 files changed, 4331 insertions(+)
 create mode 100644 .github/dependabot.yml
 create mode 100644 .gitignore
 create mode 100644 _config.landscape.yml
 create mode 100644 _config.yml
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 scaffolds/draft.md
 create mode 100644 scaffolds/page.md
 create mode 100644 scaffolds/post.md
 create mode 100644 source/_posts/hello-world.md
 create mode 100644 themes/.gitkeep

用户名@git命令行名 /d/HexoBlog/FirstBlog (master)
$ git checkout -b backup
Switched to a new branch 'backup'

用户名@git命令行名 /d/HexoBlog/FirstBlog (backup)
$ git add .

用户名@git命令行名 /d/HexoBlog/FirstBlog (backup)
$ git commit -m "first commit in local branch backup"
On branch backup
nothing to commit, working tree clean

用户名@git命令行名 /d/HexoBlog/FirstBlog (backup)
$ git branch -l
* backup
  master

可以看到，有两个分支 backup 、 master 前者用于本地备份，后者用于提交部署；

后面就是把本篇进行提交部署了.

# Level 1.1 Plus：

# 关于 hexo 博客的主题美化：

# 主题选择：

shoka（该主题部署起来有 Bug，等之后出解决方案）

# 材料（准备）：

工具类：git 、 hexo

环境类：Node.js 、 github

# 准备工作

进入博客所在文件夹，在此处唤出 git 命令行（鼠标空白处右键 > Git Bash Here）

下面的两个准备工作的部分可以参照 shoka 的 官网教程:

https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/

# 下载主题本体文件：

在命令行里键入下面的命令：

1
git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

这个命令的作用是从 github 上把 shoka 这个主题文件下载下来，并存放到 ** 博客根目录/themes/shoka ** 这个路径下，当然咱们也可以用其他手段下载这个文件，这里不多赘述

# 主题依赖安装：

1
2
3
4
5
6
7
npm un hexo-renderer-marked --save # 这一行是删除之前本地存在的hexo-renderer-marked插件，保证之后下载到最新版
npm i hexo-renderer-multi-markdown-it --save
npm i hexo-autoprefixer --save
npm i hexo-algolia --save
npm i hexo-algoliasearch --save
npm i hexo-symbols-count-time --save
npm i hexo-feed --save

# 进行部署

由于 shoka 的渲染有 Bug，故先放弃此主题美化方案，等待后续出替代方案或解决方案（也许会有……）

# Level 2 :

# 一个简单的基于 OBS 数据存储服务的图床搭建（较为简略）

# 搭建方式：

华为云 OBS + PicGo

# 材料（准备）：

服务器：华为云 OBS

工具类：**PicGo **

考虑到篇幅，这里就不对服务器端相关配置做相关介绍了，直接直入主题:

# 该怎么让你从本地放入 MarkDwon 文档的图片成为 “网络图片”—— 能从非本地看到

# PicGO

# 概述

# 是什么

一个软件，GitHub 上的开源项目，功能强大（具体可百度）

picgo是啥

# 有啥用

可以简单的理解为本地端与服务器端的中转站，本地图片可经由它发送到服务器成为网络图片

# 下载完后开始配置

首先，如上图所说，本体式没有华为云的图床支持的，因此需要配置支持插件

picgo插件配置

然后进入图床设置：

华为云OBS图床设置

其中，第一行是由华为云服务器随机生成的一个类似于上传功能的” 接口账号 “。第二行就是对应的密码了，第五行就是图片在服务器里的存放目录。其他的均是在服务器的设置，不进行赘述。

配置完成后可以去 “上传区” 试一试，这里就不作演示了。

# Typora 中设置 PicGo 图床实现图片自动上传

# 配置图像设置

从左上角 “文件” 选项里点击 “偏好设置”，勾选上下图的选项

typora里的图像设置

# 验证图片上传是否成功

点击上图的 “验证图片上传选项”，等待一下，如果出现 PicGo 的上传成功提示，那就算配置成功

typora上传验证