给这个博客网站写一个README!

总览

以上就是我在建这个博客站的时候用到的工具&网站。

部署一个网站可以说是非常方便快捷了,我写这个的目的是记录一些可能容易遗忘的点,这样下次再部署的时候就会更加得心应手!

建站

Hexo - 博客构建框架

Hexo 是一个快速、简洁且高效的博客框架。

官网是:Hexo

模板可以在这里找到:Themes | Hexo

我当前使用的主题是Icarus,地址是:GitHub - ppoffice/hexo-theme-icarus

说不定以后看不顺眼了,或者另有新欢了又会换一个主题😆

Hexo有一些最基本的命令,在文档里面扫一眼就知道了,很简单。

主要用到的几个命令是:

  • 在一个空文件夹下初始化项目:
1
hexo init
  • 然后需要用npm来安装依赖:
1
npm install
  • 接着就是一些启动和部署的命令:
1
2
3
hexo server(或者hexo s)
hexo generate(或者hexo g)
hexo deploy(或者hexo d)

几个要注意的地方:

1、关于npm install

npm install的时候有可能会遇到一些问题,比如npm install hexo-deployer-git --save不成功,这时候可以试着把node_modules整个文件夹删掉,再重新npm install一次,防止之前可能使用pnpm来管理包导致的冲突。

2、关于hexo deploy

hexo deploy的时候会把public文件夹下的代码推送到远程仓库,其他的代码还是在本地。

hexo d的时候,可以加上commit,比如hexo d -m "first commit",和git的命令类似。

Github Pages

用github pages来托管博客

在github上新建一个开源(Public)的项目,注意项目的名字。

比如我的GitHub用户名是zittur,那么我就创建一个zittur.github.io的代码库,这样Github Pages就能自动识别到了。

image.png

接下来需要做的就是配置博客项目的 _config.yml 文件:

1
2
3
4
deploy:
type: git
repo: [email protected]:zittur/zittur.github.io.git
branch: main

配置好之后,再执行hexo d就可以将public下的代码推送到GitHub的zittur.github.io代码库的main分支上去了。

接着就是设置github pages。

Settings 👉 Pages 👉 Github Pages

image.png

确定Github Pages打开了,然后将Branch设置成main分支,因为我们推上来的public的内容都在这个分支上。

设置Custom domain,把我们买的域名填在这里,这个在后面降到namecheap的DNS配置的时候再展开。

image.png

如果还没有设置自定义域名,那么这时候就可以访问zittur.github.io来直接访问博客了。

将源码也一并上传Github

以上只是将hexo generate的内容上传到GitHub,使用Github Pages的功能部署了一个在线的网站,但是其他的代码还是在本地,如果需要在多个不同的端上操作,也可以把这些源码给push到GitHub上,方便多端同步。

GitHub上新建一个私有仓库,空的仓库就行了。

在本地的博客文件夹中执行git相关的操作,比如,我在本地的博客路径hilooong下执行:

代码库初始化:

1
git init

添加远程仓库:

1
git remote add origin [email protected]:zittur/hilooong.git

设置主分支:

1
git branch -M master

添加代码前检查一下.gitignore,就不把node_modules/和public/推到这个仓库去了:

1
git add .

然后就是:

1
git commit

推送到远程仓库:

1
git push -u origin master

域名

Namecheap和CloudFlare

我的域名 hilooong.com 是在namecheap上买的,之前都是在狗爹那买的,但是总感觉体验不佳,这次试一下在namecheap上体验如何。

因为我使用了CloudFlare,所以域名买好了之后要先配置NameServer。

CloudFlare的配置流程

添加网站:

image.png

Step1,选择免费模式:

image.png

Step2,复制这两个NameServer的地址配置到namecheap上。

image.png

namecheap的nameservers配置选择自定义 DNS(Custom DNS),也就是说让CloudFlare来配置DNS,就不再namecheap这里配置了。

image.png

Step3,CF中将下面这三个配置的开关都打开:

image.png

接着还需要在CF的DNS配置中解析A记录和CNAME记录。

因为我们使用的是Github Pages来部署的博客,也就是说,我们是希望通过访问域名hilooong.com之后,转到域名zittur.github.io上的。

那么,这几个记录的配置如下:

image.png

四个A记录是github pages的IP。

1
2
3
4
185.199.111.153
185.199.110.153
185.199.109.153
185.199.108.153

有一个点要注意,除了在这里需要配置CNAME,还需要在博客根目录下添加一个名为CNAME的文件,文件内容就是域名,这样保证每次部署的时候都能和域名绑定在一起。

image.png

image.png

github pages在设置custom domain的时候可能还需要验证域名归属,其实就是按要求在DNS里面配置一条TXT的记录即可。

至此,域名就算绑定成功了,可以愉快地使用域名来访问了。

Google Analysis代码

我们还可以在GA中添加数据流,这样还可以通过GA的控制台看到网站的访问情况。

Icarus的主题配置文件提供了统计的配置:

1
2
3
4
5
6
plugins:
# Google Analytics plugin settings
# https://analytics.google.com
google_analytics:
# Google Analytics tracking ID
tracking_id: XXXXXX

tracking_id 在我们添加数据流之后可以获得,就是衡量ID(measurement-id)。

添加之后部署成功,可以在GA验证一下是否成功。

本地代码编辑

本地的代码编辑器使用的是VSCode。

Markdown编辑器用了开源的MarkText,暂时体验还不错,就是在添加图片的时候不是很方便。

AI辅助

devv.ai很好用,因为喂了很多技术文档,所以遇到问题问他一般都能解决。

kimi也很好用。

chatgpt也好用,虽然花了钱买gpt4,但是用起来真心疼啊,反而用得少了。

给这个博客网站写一个README!

https://hilooong.com/2024/03/17/003-add-readme/

作者

Hilooong

发布于

2024-03-17

更新于

2024-03-18

许可协议

评论