建站小记


个人网站搭建过程

本过程参考友链Rlin的配置过程,记录建站全过程~


一、Git安装与Node.js安装

前者参考:Git 详细安装教程(详解 Git 安装过程的每一个步骤)_git安装-CSDN博客

后者参考:Node.js安装与配置(详细步骤)_nodejs安装及环境配置-CSDN博客

注意安装过程出现问题可以尝试更换网络,开关梯子,留意博客中评论区和博主在后面记录可能出现的问题,再不行谷歌,再不行就chatgpt~


二、Hexo安装

$ npm install -g hexo-cli
$ hexo init Hash-Lee-777.github.io  # 为后续更新到github上,使用github名字.github.io
$ cd Hash-Lee-777.github.io  # 进入本地的博客文件夹
$ npm install
$ hexo server # 打开本地服务器预览
$ npm install --save hexo-theme-fluid # 安装fluid主题,注意可以先新开一个cmd窗口进io或者ctrl c后再执行

注意:建议不使用第六行命令,因为会自动安装到module文件夹,而后续github配置是不推送此文件夹上去的。

我选择直接去GitHub下载release源码,解压到hexo项目的themes目录下,重命名为fluid。注意:有嵌套层,需要把最里面的文件夹里粘贴到倒数第二层文件夹,否则会报错,这个错误坑了我好久o(╥﹏╥)o


三、配置与本地部署

修改博客目录中_config的yaml文件(可以直接在code中打开):

language: zh-CN  # 指定中文
theme: fluid  # 指定主题

注意!不要直接粘贴,不然会报重复的错,因为theme在最底下,我第一次直接复制粘贴就报错了,可以ctrl f找一下对应位置。

执行如下命令,可以在本地生成静态页面:

$ hexo clean  # 清空一下缓存,有时候博客页面显示不正常也可以试试这个命令行
$ hexo g  # hexo generate的简写,把刚刚做的改动生成更新一下
$ hexo server  # 在本地服务器看看博客:https://localhost:4000

四、部署Github Page

Github Page是提供静态网站访问服务的,就是将静态网站项目传到GitHub上,它能为你提供一个url入口(如Hash-Lee-777.github.io),直接访问你的静态网站,而Hexo编译生成的就是一个静态网站。

首先我们得把生成的静态网站上传到GitHub中,GitHub中得有一个对应的仓库。所以第一步是创建一个名为GitHub用户名.github.io的代码仓库

然后修改博客配置_config,改成自己的信息:

deploy:
  type: git
  repo: git@github.com:xxxx/xxxx.github.io.git # xxxx是你的GitHub用户名
  branch: master

然后生成站点文件并推送到远程仓库即可,推送时需要填GitHub账户和密码:

hexo clean  # 保险起见,每次我们都清空一下
hexo deploy --generate # ERROR Deployer not found: git的话,执行下一行命令。这是因为没有安装hexo-deployer-git插件,在站点目录下输入下面的命令安装插件就好了
 npm install hexo-deployer-git --save

注意!!!第二行默认git push了,所以不用手动push!

推送命令参考github新建仓库后的页面给出的命令,这里不再给出。由于我的公钥在和别人协作项目,添加到了别人的账号里,所以git push不了,这里我的解决方案是直接让我朋友删除key,添加到自己账号再push,你也可以选择生成一个新的ssh key~

如果你和我一样在win下操作,可能会遇到如下报错:

warning: in the working copy of 'package-lock.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches it

这是换行符的问题,Windows下换行符和Unix下的换行符不一样,git会自动转换,但是这样有问题,所以解决方法如下:

#提交时转换为LF,检出时转换为CRLF
git config --global core.autocrlf true

适用于Windows系统,且一般为Windows默认设置,会在提交时对换行符进行CRLF - LF的转换,检出时又会进行LF - CRLF的转换。


五、修改页面配置

更多配置可以参考Hexo官方文档:Hexo 配置,以及Fluid官方文档:Fluid 配置指南。Hexo配置是博客主目录下的_config.yml,Fluid配置是node_modules下的hexo-theme-fluid(手动从release下安装的是在theme文件夹下)

踩坑:

1.要修改fluid配置,要把其复制到项目的根目录再修改,否则修改无效。

2.关于CNAME文件,很多博客说要放在项目根目录,但这会导致我hexo d后仓库里的CNAME文件消失,解决方法是放在根目录下的source文件夹中,这样就可以一起上传了。另外,建议不要新建文本文档填写域名,这样会导致推到仓库里的名称是“CNAME.txt”,导致解析出错。解决方法如下:

cd path\to\your\hexo\project # 请将 path\to\your\hexo\project 替换为你实际的 Hexo 项目路径。
echo. > CNAME # 使用以下命令创建一个新的 CNAME 文件
notepad CNAME # 使用以下命令打开 CNAME 文件,你可以使用 Notepad 编辑器
yourdomain.com # 在 Notepad 中,输入你的自定义域名

这样一来推上去的文件名就是CNAME了。


关于友链和评论系统:请参考https://hexo.fluid-dev.com/docs/guide/


文章作者: Hash Lee
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Hash Lee !
评论
  目录