记录第一次搭建博客_hexo中arknights主题安装

记录第一次搭建博客

基本上是按照从零开始免费搭建自己的博客(一)——本地搭建hexo框架 | 半亩方塘 (gitee.io)中内容来的

效果预览

如果搭建完了这里会放一个预览链接和图片

https://xqher.gitee.io

搭建目的

搭建博客的目的是方便浏览管理一些学习时的笔记，之前也用过Typora导出html然后用Gitee部署的方式，但是由于没怎么学过前端。所有笔记存在一个文件内显然不是一个好方式。所以还是打算学一下怎么搭建一个博客，顺便将自己不太熟没接触过的概念了解一下。

这里是使用Gitee + 博客园(作为图床) + Typora的搭建方式

主要是在线服务基本都是国内提供，能避免不少麻烦，图床不用Gitee是因为前段时间似乎有Gitee替换了图片链接还是什么导致很多博客用Gitee作图床的都丢了图片，权衡再三又不想多了额外开支，还是选择以前用的小工具将博客园作为图床。

看完大概就想到那么多，于是先准备好需要的原材料

原材料准备

• 编写博客的软件(使用Markdown):Typora官网
• Gitee账号|仓库一个:[有账号的情况下准备一个部署用的仓库](# 有账号的情况下准备一个部署用的仓库)
• Git工具以及初步部署:安装Git和初步使用
• Hexo框架搭建|安装node.js : [安装node.js以配置Hexo框架](# 安装node.js以配置Hexo框架)
• 使用博客园充当Typora的图床 : Python上传图片到博客园

以上有一些重复性的内容因为我太懒或许之后复习的时候会补个链接，这里估计会按下不表

有账号的情况下准备一个部署用的仓库

1.新建一个以自己用户名为名的仓库

这里主要是用户名的话部署出来的域名比较简洁

类似这样https://xqher.gitee.io ,但是没开启pages服务的且上传索引页面的情况下此链接只会跳转对应仓库

配置Readme 和 License之后就可以上传个静态的索引网页来查看是否启动成功

注意Gitee账号想要使用pages功能部署网页需要上传身份证实名

且不像Github更新文件后会自动部署，需要用到上图的更新功能手动更新，当然之后也可以用脚本实现自动化更新

安装node.js以配置Hexo框架

Hexo框架

一个专门用于博客类网站的开源项目

• Hexo中文网
• hexojs/hexo (github)

这里我只要知道我虽然我不懂前端，但我安装好框架也能搭建博客就可以了(当然以后也免不了学一点)

Hexo依赖环境:Node.js

Node.js是运行在服务端的JavaScript,能够脱离浏览器单独运行js,类似于安装了解释器后可以独立编译代码。

下载Node.js

Node.js 中文官网

这里还是习惯性的使用维护版，因为新版可能有一些未发现的特性不好解决

一路确认安装即可，注意考量是否勾选最后一个选项，这是安装额外的工具
我反正不熟悉这个，就没勾选

Automatically install the necessary tools.Note that this will also install Chocolatey. The script will pop-up in a new window after the installation completes.
自动安装必要的工具。请注意，这也将安装Chocolatey。安装完成后，脚本将弹出到一个新窗口中。

测试Node.js是否安装成功

win+r打开运行框输入cmd进入命令行然后输入npm -v查看是否出现版本号，出现则安装成功。此处npm类似pip都是管理依赖包的工具

顺带一提，平时输入notepad打开个记事本记录点东西也很常用win+r -> notepad

使用CNpm替代Npm

npmmirror 中国镜像站

直接用npm装cnpm就可以用cnpm装模块了

安装Git

这里早安装了但是又犯懒，就跳过了。随便百度一下都有安装Git的教程

Git 详细安装教程（详解 Git 安装过程的每一个步骤）_mukes的博客-CSDN博客_git安装

安装Hexo

首先准备一个安装Hexo框架和以后博客文件的文件夹，注意不要存放路径出现中文,我这里是E:\WorkPlace\Blog

习惯把一些工程文件放在根目录下一个WorkPlace文件夹内，环境之类也单独放一个文件夹可能好管理一点

进入文件夹后右键选择Git Base Here

然后依次输入以下指令(建议手打一遍加深印象)

#安装 hexo 框架 -g 表示安装全局模块，有点类似正则表达式的g
npm install -g hexo-cli
#初始化文件夹 会用git clone一个默认模板库
hexo init
#安装hexo依赖包类似pip requirements文件后安装需要的依赖包
npm install
1
2
3
4
5
6

https://github.com/hexojs/hexo-starter.git
#默认模板地址，改了一些东西找不回来的话可以直接克隆替换
1
2

如果ping github之类的ping不同导致命令卡住，可以使用类似Steam++之类的代理(真挺好用)

测试本地博客效果

于是这里再在Git bash窗口中输入以下指令开启本地博客查看效果

其中g是generate的缩写，s是server的缩写

#两种写法都可以
#生成静态网站
hexo g
#启动服务器
hexo s
#或者写在一行
hexo g && hexo s
1
2
3
4
5
6
7

注意Ctrl + C 会关掉运行中的本地服务，需要测试的话这里可以直接点击http://localhost:4000/

以上图片是默认的效果，还可以安装自己想要的主题

选择喜欢的主题

在Hexo的主题站Themes | Hexo中收录很多主题，可以在上面选择喜欢的

而恰巧本人是个粥批，一眼选中了下面这个| Arknights (yueplus.ink)

感觉不错，可能排版我个人觉得还可以改一下，不过还是等我学了前端再说阿布

安装主题

选中喜欢的主题后找到主题的Github页面

在Theme文件夹内克隆仓库

当然有些仓库内提供好了克隆的命令，直接克隆然后将主题文件夹扔到themes内也可以

#这里就将文件直接克隆到了themes/arknights里
git clone https://github.com/Yue-plus/hexo-theme-arknights.git themes/arknights
1
2

然后配置config启动主题(不同主题可能有不同需求，参照仓库内安装说明)

这里只是展示设置主题后重新启动

#清理 生成 启动
hexo clean && hexo g && hexo s
1
2

git bash内无法使用粘贴?不如试试右键粘贴

这一步不同主题可能效果不同，反正我这个主题还没完成安装，需要配置更多东西

这里我直接将原仓库的配置文件拷了下来

hexo-theme-arknights/_config.arknights.yml at hexo · Yue-plus/hexo-theme-arknights (github.com)

然后还是不行，就上网搜索了以下更换主题的坑

部署Hexo踩过的坑—hexo更换主题 - 知乎 (zhihu.com)

在Hexo目录下git bash 执行

npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive
1

等他跑完重新清理部署一遍，于是终于部署好了

接下来就是参考仓库设置一些文字，图片，功能开关之类的。以及如何新建博客等如何操作

修改主题内容

在config 和 主题config中修改内容即可

开启更多功能还需要看仓库介绍

发布到Gitee上

首先安装发布插件

npm install hexo-deployer-git
1

配置_config.yml文件

# 其中 xxxxxx 是前面多次用到的你的GitHub用户名，注意是master分支
deploy:
  type: git
  repo: git@gitee.com:xxxxxx/xxxxxx.git
  branch: master
1
2
3
4
5

# 接着执行下面的命令 s表示服务起在本地，现在的d表示部署在远端
hexo g && hexo d
1
2

博客相关功能设置

这个可以写的太多了，放到另一篇博客里了

链接地址修改

可以在markdown的yaml部分加上自定义的字段声明文件分类位置

但我这里因为本身已经放在不同文件夹下了，直接将permalink修改成:hash/似乎就可以了

这里是用文件名的hash作为博客的url

然后将config.yml下的permalink修改一下然后生成测试效果，图片是用title的效果

引入其它文章

{% post_link Note/Drawing/draw_make_money%}
1

其中后面的就是要引入的其它文章地址，不需要后缀

注意后面别整个十几级目录名字太长

新建博客一键发布

新建博客的方式

Hexo的目录下的source->_posts里就是博客文件的存放位置

我干脆直接把markdown文件啥的全扔在里面，用Typora在里面写了。

就是注意新建的markdown文件需要新建yaml Front-matter,通过在文章开头键入---以填入博客的名称 分类 标签 日期等参数

title: 记录第一次搭建博客
date: 2022-04-29 04:14:10
tags:
- 测试
- 博客 
- Hexo
- Node.js
  categories:
- 博客搭建

1
2
3
4
5
6
7
8
9
10

这里或许可以新建个py文件在发布前检查md文件是否已设置Front-matter,没有就自动加上一些通用的参数

加上几个脚本然后实现一键发布更新

这里因为懒，写了个自动加上FrontMatter的脚本

这里我把这些脚本在blog目录下新建了个文件夹存储，所以需要访问文件相对路径的上级目录

#检测当前md文件是否已添加Front Matter
import os
import time
#../ 当前文件的上级目录 相对路径
path = '../source'

def getAllSub(path):
    fileList = []
    #walk  方法用于在目录树中游走输出目录中的文件名
    for parent,dirs,files in os.walk(path):
        for fileName in files:
            #把目录和文件名合成一个路径
            if fileName.endswith('.md'):
                fileList.append(os.path.join(parent, fileName))
    return fileList

# 时间格式标准化
def TimeStampFormat(timestamp):
    return time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(timestamp))


if __name__ == '__main__':
    fileList = getAllSub(path)
    for path in fileList:
        #读取文件第一行就知道有没有配置了
        file = open(path,'r',encoding='utf-8')
        hasConfig = file.readline().strip() == '---'
        times = TimeStampFormat(os.path.getmtime(path))
        dates = TimeStampFormat(os.path.getctime(path))
        name = os.path.basename(path)[:-3]
        frontMatter = f'''---
title: {name}
date: {dates}
updated: {times}
tags: 
categories: 
---
'''
        print('-----------------------------------')
        print(name)
        if not hasConfig:
            with open(path, 'r+', encoding='utf-8') as f:
                content = f.read()
                f.seek(0,0)
                f.write(frontMatter+content)
                print('一篇文章未添加FrontMatter, 已处理')
        print('-----------------------------------')
        
    print('--------------处理结束--------------')


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
'
运行
运行

cd /e/WorkPlace/Blog
pwd
echo -e "\033[47;30m>>>>>>>>>>>>>>>>>>>>hexo g<<<<<<<<<<<<<<<<<<<<\033[0m"
hexo g
echo -e "\033[47;30m>>>>>>>>>>>>>>>>>>>>hexo d<<<<<<<<<<<<<<<<<<<<\033[0m"
hexo d
sleep 2
# 执行完毕不退出
# exec /bin/bash
1
2
3
4
5
6
7
8
9

新建一个.sh后缀的脚本，注意路径

一个更新博客用的脚本

import time
from playwright.sync_api import sync_playwright

USERNAME = 'ac'
PASSWORD = 'pwd'
GITEE_PAGES_URL = 'https://gitee.com/xqher/xqher/pages'

def main():
    with sync_playwright() as p:
        for browser_type in [p.chromium]:
            browser = browser_type.launch(headless=False)
            page = browser.new_page()
            page.goto('https://gitee.com/login')
            page.click('input[name="user[login]"]');
            page.fill('input[name="user[login]"]', USERNAME);
            page.click('input[name="user[login]"]');
            page.fill('input[name="user[password]"]', PASSWORD);
            page.click("input[value='登 录']")
            time.sleep(3)
            page.goto(GITEE_PAGES_URL)
            page.on("dialog", lambda dialog: dialog.accept())
            page.click(".update_deploy")
            page.on("dialog", lambda dialog: dialog.accept())
            # text = "已开启 Gitee Pages 服务，网站地址："
            # state="attached", "detached", "hidden", "visible"
            # page.wait_for_selector('span:text("正在部署，请耐心等待...")', timeout=12 * 1000, state='hidden')
            time.sleep(7)
            page.wait_for_selector('span:text("正在部署，请耐心等待...")', timeout=10 * 1000, state='hidden')
            print('OK')
            browser.close()

if __name__ == '__main__':
    main()
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

最后用一个bat脚本将所有操作放在一起

:: post_my_blog.bat
python ScanBlog.py
D:\Programs\Git\git-bash.exe deploy.sh
python gitee_updater.py
pause
1
2
3
4
5

重命名为bat后缀文件双击就可以了，注意文件路径

Python上传图片到博客园

详情参考Python+Typora博客图片上传 - 沉云 - 博客园 (cnblogs.com)

当然，用博客园的图得配置一下Header

观察了网页的代码，估计是通过pug这个文件生成的，参照以前图片403的情况处理方式，加上了个referrer就解决了

meta(name="referrer" content="no-referrer")
1

因为python还不是很懂(主要是这个工具需要手动维持Cookies,大概吧,觉得似乎容易过期)这里就没用这种方式，需要的话参考上面那个链接即可

也可以使用这个windows上的简单工具，配置好账号密码就能直接使用

参考windows-Typora自动上传图床（超简单详细）_勿念不悔的博客-CSDN博客

关于博客园怎么找到MetaWeblog地址

参考图中选择设置，其它设置，就可以看到MetaWeblog地址