Mac下Hexo+GithubPage+域名+七牛云图床+Typora+PicGo搭建博客(1)

因为各个版本可能不一致,各个网站和软件也可能会发生未知变化,所以本文只针对特定版本和特定时间,遇到问题读者最好还是以官方文档为准。

Base信息:

MacOS:12.1

Node.js: 16.13.2

npm: 8.1.2

git: 2.15.0

Hexo: 6.0.0

Typora: 1.0.5

PicGo:2.3.0

本文成稿于2022-02-12,本文假定你具有一定编程基础,买好了域名并备案,了解md语法。


安装相关软件

安装git,参考官方文档,此处不赘述。

安装node.js,点击下载安装。

打开终端,新建目录blog,接下来的操作都在这个目录下进行。

1
sudo npm install -g hexo-cli

安装完后,输入以下命令进行检查,输入每个命令后,都会弹出相应版本号,确保都有安装:

1
2
3
4
5
node -v

npm -v

Git --version

然后安装Hexo和 npm及hexo-deployer-git:

1
2
3
sudo npm install -g hexo
sudo npm install
npm install hexo-deployer-git --save

初始化Hexo

1
hexo init

执行下述命令生成本地网页文件并开启服务器,然后通过http://localhost:4000查看本地博客。

1
2
hexo g
hexo s

image-20220213142609817

这样就代表本地成功了。


登陆github,新建仓库,名称必须为你的用户名.github.io,比如你的用户名是just,那么就新建just.github.io,注意仓库要选择公开。

通过访达进入blog文件夹,打开文件_config.yml,将下面代码复制进去。

1
2
3
4
deploy:
type: git
repository: git@github.com:你的用户名/你的用户名.github.io.git
branch: master

然后在终端中执行如下命令:

1
2
hexo g
hexo d

出现这个标识则表示上传成功:

1
INFO  Deploy done: git

添加ssh key后不需要每次更新博客再输入用户名和密码。首先检查本地是否包含ssh keys。如果存在则直接将ssh key添加到GitHub之中,否则新生成ssh key。

输入一下代码,之后按照要求输入账号和两次密码

1
ssh-keygen -t rsa -C "your_email@exampl"

完成之后,打开博客文件夹,将your_email.pub中的内容复制到github中的设置-deploy keys中即可。

然后执行如下代码

1
2
hexo g
hexo d

切换到source目录下,新建文件CNAME,在其中添加一行记录,比如你的完整个人域名是http://www.so.com,那么此处填写:

1
so.com

之后执行:

1
2
hexo g
hexo d

然后在云解析DNS/域名解析/解析设置中添加两条记录:

1
2
3
4
5
6
7
8
9
记录类型:CNAME
主机记录:@
解析线路:默认
记录值:http://你的github的用户名.github.io

记录类型:A
主机记录:www
解析线路:默认
记录值:ping http://你的github的用户名.github.io 获得的ip地址,例如185.199.109.132

进入你的项目的github,进入对应的仓库,在仓库下的settings下找到Pages选项,将你的域名输入进Custom domain中:

image-20220213203740363

之后就可以访问你自己的域名了,注意可能需要等待5min才能生效。

image-20220213203835464


更换主题,可以参考NexT官方文档,进行页面的美化修改等。

下面是本人的例子:

先切换到你的博客目录,然后执行:

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

官方文档上有的内容,本文不会涉及。

hexo 5.0以后删除了swig,所以要安装上:

1
npm i hexo-renderer-swig

修改菜单的时候注意去掉斜杠后面的空格:

1
2
3
4
5
6
menu:
home: / || home
about: /about/|| user
tags: /tags/|| tags
#categories: /categories/ || th
archives: /archives/|| archive

修改文章链接:

1
permalink: :year/:month/:day/:hour-:minute-:second/

添加版权信息:

1
2
3
4
5
creative_commons:
license: by-nc-sa
sidebar: true #侧边栏中的版权标识
post: true #每篇文章底部都显示版权信息
language:

返回顶部:

1
2
3
4
5
6
back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: true

增加阅读进度:

打开 themes/next/_config.yml ,搜索关键字 scrollpercent ,把 false 改为 true

添加统计功能

在站点的根目录下:

1
npm i --save hexo-wordcount

打开 themes/next/_config.yml ,搜索关键字 post_wordcount

1
2
3
4
5
6
7
8
9
post_wordcount:
item_text: true
#字数统计
wordcount: true
#预览时间
min2read: true
#总字数,显示在页面底部
totalcount: true
separated_meta: true

关闭动画效果(此处是修改,不是新增):

1
2
motion:
enable: false

写作可以参考Hexo官方文档,主要步骤就是终端中执行命令hexo new 文章名,然后在博客文件夹目录下的source下的_posts打开进行编写。

本文参考了如下文章,在此衷心表示感谢。几位翔实严谨的文章帮助我解决了不少问题。

https://zhuanlan.zhihu.com/p/351031589

https://zhuanlan.zhihu.com/p/75438236

http://www.dragonstyle.win/3358042383.html

如果觉得写的还行,赞助瓶脉动~
0%