个人博客搭建(mac)

记载博客的搭建,使用Hexo+Github。

详细流程

配置环境

以下环境依次安装

需按顺序在终端中安装,homebrew要提前装好,一般为在终端输入:

1
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

更详细见官网:https://brew.sh ,或者寻找教程。

1:安装Node.js

1
brew install node

2:安装Git

1
brew install git

3:安装hexo

1
npm install -g hexo-cli

搭建博客

桌面新建文件夹 Blog。(由于我已经建过,因此建个BlogCN做演示)

新建文件夹

进入blog文件夹:cd Desktop/Blog

初始化并安装hexo:hexo init

启动hexo:hexo s (hero start简写)

进入博客的默认网站:http://localhost:4000

可以见到已经默认生成了一篇博文

新建一篇博文,终端输):hexo n "发布第一篇个人博客"hexo new简写)

此时在Desktop/Blog/sourse/_posts 文件夹下可以看到刚刚建立的"发布第一篇个人博客.md"的文件

利用Markdown编辑器可以对内容进行更改,比如文件中输入:内容测试。

终端中ctrl+c,退出命令,退出后默认会依然在Blog目录下

终端在在Blog文件下输入:

清理:hexo c (hexo clean) 生成:hexo g (hexo generate) 启动:hexo s (hero start)

可以进入本地网站http://localhost:4000看到多了篇博文。

使用主题

可在这查找主题:https://hexo.io/themes

安装Fluid主题

在这里我采用的是Fluid主题,使用方式见:

https://github.com/fluid-dev/hexo-theme-fluid

下面做个简单介绍:

终端进入Blog文件夹后使用:

1
npm install --save hexo-theme-fluid

便已经安装好了主题。在Blog文件夹创建名为*_config.fluid.yml的文件,将主题的_config.yml内容复制进去。以后主题会优先使用该文件的配置,因此可以在该文件上修改主题配置而保护原来配置方便以后更该主题等。可以先将原来的 _config.yml*基础的配置修改好了之后再复制。

与GitHub同步

GIghub使用更为方便,但是在国内访问不变。并且使用Gitgub pages托管静态网站不会被百度检索(Github拒绝百度爬虫)。有需要被百度推广的可以使用国内的Gitee或者Coding托管静态网站,或者自己租服务器搭建网站(暂不讨论这条)。

1:新建或登录github账号:https://github.com

2:新创建一个仓库New repository,仓库名必须为:昵称.github.io(昵称中有大写字母要全部改为小写)

,(可选:输入描述),选择类型为:Public

  1. 在目录下安装git部署插件

    1
    npm install hexo-deployer-git --save
  2. 进入Blog文件夹,找到**“_config.yml”**文件并打开,做如下修改:

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
    type: git
    repo: https://github.com/username1/username2.github.io.git
    branch: master

username1为你的用户名(包含大写)

username2为大写改为小写的用户名

也就是说将type改为git,将repo:后内容改为"仓库网址.git"

仓库网址可以在浏览器上查看。

在终端Blog目录命令下,利用代码将本地同步到GitHub上:

1
hexo d

中间会让输入github账户名与密码,账户名为邮箱,

密码采取可以采取不同授权方式(在这里我暂时采取了方式一)

方式一:个人令牌

  1. 打开Github个人主页,右击头像,在呼出菜单中选择Settings

  2. 在左侧菜单中选择Developer settings

  3. 左侧菜单选择Personal access tokens

  4. 选择授权时间,授权权限(个人使用方方便的话可以全开)

  5. 点击Generate Code生成

  6. 将生成的密钥复制,输入到终端对应需要密码的地方。

方式二:SSH密钥(暂未使用,便不介绍了)

之后便可以进行同步了。方式一的密钥过期后需要重新生成。

注意在渲染时要选择正确的分支:

比如我的文件同步到master分支上,那么渲染时要在master分支上渲染,而默认分支为main,因此需要做一些调整。

fig1
fig2

支持Latex

由于多个Math插件不共存,安装确保只安装一种,也就是说仅采取下面一种方式,如果切换实现方式需要卸载就的math插件安装新插件:

1.hexo-filter-mathjax + hexo-renderer-pandoc

hexo math有关的npm包卸载,例如:

1
2
npm un hexo-math --save 
npm un hexo-renderer-markdown --save

安装hexo-filter-mathjax:

1
npm i hexo-filter-mathjax --save

安装pandoc:https://pandoc.org/installing.html

1
brew install pandoc

将hexo默认引擎更换为mathjax引擎::

hexo-renderer-pandoc

1
2
npm un hexo-renderer-marked --save
npm i hexo-renderer-pandoc --save

执行hero c

若要启用mathjax则需要在md笔记开头开启(mathjax: true),例如:

1
2
3
4
5
6
---
title: 个人博客搭建(mac)
date: 2022-08-29 08:04:16
mathjax: true
tags:
---

不需要加载latex的也可以关闭提高加载速度

示例:

代码:

$i\hbar|\psi(t)\rangle=\hat H|\psi(t)\rangle$

$$i\hbar|\psi(t)\rangle=\hat H|\psi(t)\rangle$$

效果:

2. 使用主题自带的Latex功能

以Fluid主题为例,详见用户指南中Latex公式部分:

https://hexo.fluid-dev.com/docs/guide/

3.利用hexo-math插件

https://github.com/hexojs/hexo-math

插入图片

  1. 在/Desktop/Blog/source中创建图片文件夹,通过语法插入:

![alt](/images/name.jpg)

  1. 在"_config.yml"中将以下代码由false改为true
1
2
post_asset_folder: true
relative_link: true

(注意确认已将所有"url:"改为自己的仓库名)

之后创建文档时:

1
hexo new post_name

可将每个文档生成同名文件夹,将图片放在对应同名文件夹中,由此可以直接引用

1
![描述](name.jpg)

以前的旧文档可手动创建同名文件夹。

如果以上不行的话,便增加插件,在Blog目录下:

1
npm install hexo-asset-image --save

打开配置文件_config.yml将 post_asset_folder,从false改成true

打开Desktop/Blog/node_modules/hexo-asset-image/index.js

将内容更换为下面的代码

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
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
var config = hexo.config;
if(config.post_asset_folder){
var link = data.permalink;
if(version.length > 0 && Number(version[0]) == 3)
var beginPos = getPosition(link, '/', 1) + 1;
else
var beginPos = getPosition(link, '/', 3) + 1;
// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
var endPos = link.lastIndexOf('/') + 1;
link = link.substring(beginPos, endPos);

var toprocess = ['excerpt', 'more', 'content'];
for(var i = 0; i < toprocess.length; i++){
var key = toprocess[i];

var $ = cheerio.load(data[key], {
ignoreWhitespace: false,
xmlMode: false,
lowerCaseTags: false,
decodeEntities: false
});

$('img').each(function(){
if ($(this).attr('src')){
// For windows style path, we replace '\' to '/'.
var src = $(this).attr('src').replace('\\', '/');
if(!/http[s]*.*|\/\/.*/.test(src) &&
!/^\s*\//.test(src)) {
// For "about" page, the first part of "src" can't be removed.
// In addition, to support multi-level local directory.
var linkArray = link.split('/').filter(function(elem){
return elem != '';
});
var srcArray = src.split('/').filter(function(elem){
return elem != '' && elem != '.';
});
if(srcArray.length > 1)
srcArray.shift();
src = srcArray.join('/');
$(this).attr('src', config.root + link + src);
console.info&&console.info("update link as:-->"+config.root + link + src);
}
}else{
console.info&&console.info("no src attr, skipped...");
console.info&&console.info($(this));
}
});
data[key] = $.html();
}
}
});

链接:https://www.jianshu.com/p/f72aaad7b852

  1. 利用DNS云存储直接插入url

绑定个人域名

首先在域名服务商处申请一个域名。

国内:阿里云,腾讯云,华为云等

国外:namesilo, name, namecheap等

注意的是:

  1. 国内域名需要通过实名认证,国外仅需填写部分信息就可。

  2. 如果自己想租用云服务器搭建,境外主机不需要备份,国内/国外域名均可。

    境内主机必须要国内代理的域名,并且需要备案(备案较为繁琐)。

  3. 境外域名有概率被墙(百度,必应国内版搜不到,谷歌/必应国际版可以搜索到)。

我个人在namesilo代理注册:https://www.namesilo.com。

下面便利它为例子:

购买教程为:https://namesilo-china.com ,其它网站购买也是类似的。

注意要先注册账号,并且填写好个人信息后再去购买.确保右上角头像显示的信息是正确的

fig3

购买完成后进入My Acount界面右上角点击Manage My Domains出先购买的域名

点击右边的蓝色小球(下图红圈标出),配置DNS

fig4

将已有的DNS信息全部删除,往下翻可以看到网站已经提供了Github的模版,直接点击Apply Template便可。使用模版前保证自己的DNS信息是空的。

fig5

然后点击CNAME添加一条信息,只要输入www以及将地址改为你的GitHub个人网网站地址便可,地址为:username.github.io。具体见下图

fig6

如果使用其它网站代理的却没有模版的可以手动输入,保证DNS信息除了最后一条地址改为自己的GIthub地址其它信息和上面一致。要注意的是前四条类型为A最后一条类型为CHAME。

接着在自己Desktop/Blog/sourse文件夹中创建CNAME的无类型文件。打开后(可以用文本或者代码编辑器)输入你的域名(没有www.)比如我的便是xiangjichn.com。注意一定要没有类型,没有后缀名。我是利用VS code直接新建的文件。

接着在终端Blog文件夹命令下输入:

1
2
3
hexo c
hexo g
hexo d

同步到Github上。

进入GIthub自己的仓库,点击Settings-Pages。

域名的解析需要一段时间,解析成功后可以看到Custom domain下为个人域名且DNS Check Sucessful。有的时候解析时间较长,会出现失败提示,等待域名解析成功后点击重新check便可。我大概解析了几分钟时间。之后会提示提示等待加载15min(第一次加载较长),耐心等待便可。

之后便可以正常访问了,建议把下面的Enforce HTTPs选项打开这样采取加密数据包,更安全,打开网站也不容易出现危险提示。

fig7

之后便可以直接在个人域名中访问自己网站了,哪怕是打开自己原来的仓库个人网页user.github.io也会跳转到这个域名上去。

一些操作总结

常用代码

进入桌面Blog文件夹:

cd Desktop/Blog

清理:hexo c

生成:hexo g

同步:hexo d

启动:hexo s

生成并同步:hexo g -d

进入博客网站,本地网址为

http://localhost:4000

发布新文章:

n "文件名"``` 注意空格
1
2
3
4
5
6
7
8

该操作会建立一新的md格式的文件,地址为Desktop/Blog/sourse/_posts

执行:

```mac
hexo c
hexo g -d

便可生成并更新到Gethub上

过一小段时间在个人网址上便会同步

或者进入本地网址查看

hexo s

http://localhost:4000

hexo Quick Start 文档

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment


个人博客搭建(mac)
http://xiangjichn.githut.io/2022/08/29/个人博客搭建(mac)/
作者
Xiang ji
发布于
2022年8月29日
许可协议