Posted on 

Hexo 搭建流水线

人人都在教满分答卷，丿丿都在教避免踩坑。

好像很多博客都有且只有教人怎么搭建博客的文章，我本以为我可以免俗，但没想到以这种形式败下阵脚——《关于我的博客总是莫名其妙出问题还解决不了于是总是重新搭博客但总是忘记怎么搭最后写篇文章给自己循环利用这件事》，欸嘿。因此本文只面向笔者个人，未涉及到的细节均在笔者脑中。

常用命令

1
2
3
4
5
hexo new page XXX
hexo n draft XXX
npm ls -dept 0 ## 查看 Hexo 插件

vercel --prod ## 部署vercel

Hexo + Vercel

现在大陆已经不可以直接访问.vercel.app了。更换了域名的博客不受影响。

安装Hexo

定位到Blog目录下：

1
2
3
npm install -g hexo-cli
hexo init
npm install

部署到Vercel

桌面：

1
2
npm -v #确认npm是否安装好
npm i -g vercel #安装vercel

博客根目录：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
vercel --prod #部署博客
Set up and deploy“D:\Blog\Aezir"?[Y/n]y
Which scope do you want to deploy to?Aezir
Found project "XXX".Link to it?[Y/n]n
Link to different existing project?[Y/n]n
What's your project's name?Blog
In which directory is your code located?./
Local settings detected in vercel.json:
Auto-detected Project Settings (Vite):
Build Command:vite build
Development Command:vite --port $PORT
Install Command:yarn install',pnpm install',or'npm install
Output Directory:dist
Want to modify these settings?[y/N]n
Linked to Aezir (created .vercel and added it to .gitignore)

参考：1分钟上线个人网站？这个工具杀疯了！

Hexo + GitHub Page

安装 Hexo

定位到Blog目录下：

1
2
3
npm install -g hexo-cli
hexo init
npm install

Github 与 SSH

1
2
3
git config --global user.name "Aezir"
git config --global user.email "igq@duck.com"
ssh-keygen -t rsa -C "6l882@duck.com"

部署

打开博客根目录下的_config.yml：

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

npm：

1
npm install hexo-deployer-git --save

其它

检查：

1
2
git config user.name
git config user.email

后遂遇到 code:128 告终.

参考：Hexo + Github博客搭建完全教程

其它

Type Name Value
A @ 76.76.21.21

Intended Nameservers
ns1.vercel-dns.com
ns2.vercel-dns.com

Type Name Value
CNAME www cname.vercel-dns.com.

Intended Nameservers
ns1.vercel-dns.com
ns2.vercel-dns.com

字体

在博客 source 目录下新建一个 font 文件夹，把字体文件放进去。

然后，在 font 目录下新建一个 字体名称.css 文件，填入如下内容：

1
2
3
4
5
6
7
8
@charset "UTF-8";

@font-face {
    font-family: "字体名称";
    src: url("字体名称.ttf") format("truetype");
}

}

然后我们需要引入这个 css，这里我用到了 Hexo 的注入器功能。

博客根目录下新建一个 scripts 文件夹，在这个文件夹下新建一个 font.js 文件：

1
hexo.extend.injector.register('head_begin', '<link rel="stylesheet" type="text/css" href="/font/Afont.css">', 'default');

这样就完成了 Web 引入，hexo s 看一下效果，字体粗细全部一样，感觉很奇怪。

这里就需要引入 字重（font weight） 概念，也就是字体的不同粗细。在这里，我们只引入了一个字重的字体，所有字体粗细全部一样，大字体不粗，小字体不细，所以很不美观。

把需要的字重全部拷贝到 font 目录下，然后打开 字体名称.css，修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@charset "UTF-8";

@font-face {
    font-family: "字体名称";
    src: url("字体名称-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: "字体名称";
    src: url("字体名称-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "字体名称";
    src: url("字体名称-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal
}

保存后重新 hexo s，可以看到有很大变化。

Blogger

十分简单，就是默认模板差点意思。
Blogger 網頁設計 | 架站 | 諮詢 | 提案合作＠WFU BLOG

License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

本站由 @Aezir 使用 Stellar 主题创建。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。