从零开始零成本搭建个人网站
2024-08-31 16:10:49

写在前面

我是一名摄影爱好者,一直很想通过个人网站的形式展示、分享我的摄影作品。但在一般情况下,搭建网站首先需要购买域名、备案、购买云服务器,然后再进行网站的部署。这些步骤所花费的金钱和时间,对于在读的学生来说可能不太愿意接受。所以我选择通过Github Pages+Hexo来搭建个人网站。这样就可以省去购买域名和云服务器等步骤,通过GitHub的托管服务来部署我们的个人网站,并使用Hexo中大量的模板来轻松完成网站的搭建。这篇文章既是一篇教程,也是我第一次搭建网站过程的记录。

准备工作

安装node.js

前往node.js官网下载长期维护版。
安装过程全程点下一步即可。安装完成后在终端输入

1
node -v

显示版本号说明安装成功

安装git

前往git官网下载安装包。
安装过程全程点下一步即可。安装完成后鼠标右键出现Git选项即为安装成功。
ppYOxQx.png

建立Github仓库

我们的网站想要开放给所有人浏览,就必须将网站代码部署到服务器上。万能的Github就可以提供这样的免费托管服务。

新建仓库

点击右上角的 + 号,选择 New repository
ppYXCwD.png
在仓库名里填写:你的GitHub用户名.github.io,并选择Public。
比如我的用户名为zs-andy,那么我应该填写的是:zs-andy.github.io
ppY0LP1.png
点击 Create repository,一个仓库就新建好了。
进入我们新建的仓库点击 Settings,选择 PagesBranch 下将 main 分支更改为 master 分支。

建立本地环境

我们的网站代码的文件需要在本地生成然后上传。

新建文件夹

新建一个文件夹,这是网站文件生成的地方。进入文件夹右键,选择 Git Bash Here 。之后的命令都在这里运行。

绑定GitHub邮箱

在刚刚打开的 Git Bash Here 里分别输入以下命令。
注意:一行一行地执行

1
2
git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 邮箱"

生成ssh密钥

输入以下命令生成ssh密钥。

1
ssh-keygen -t rsa -C "GitHub 邮箱"

进入.ssh文件夹:C:\Users\用户名.ssh
注意:.ssh是隐藏文件夹
然后用记事本打开id_rsa.pub并复制其中的内容

绑定ssh密钥

点击右上角的头像进入设置,选择 SSH and GPG keys ,然后点击 New SSH key
pptZ8VH.png
Title可以随意填写,重点是粘贴刚刚复制的密钥到 Key 中,最后点击 Add SSH key 完成添加。

验证绑定是否成功

输入以下命令

1
ssh -T git@github.com

如果出现successful,说明绑定成功。

安装hexo

Hexo是一个快速、简洁且高效的博客框架。我们可以利用Hexo快速完成精美网站的搭建。
输入以下命令切换下载源。(切换为国内下载源有助于提高下载速度)

1
npm config set registry http://registry.npmmirror.com

输入以下命令安装Hexo

1
npm install -g hexo-cli

初始化Hexo

输入以下命令完成初始化和部署插件的安装

1
2
3
hexo init 
npm install
npm install hexo-deployer-git --save

安装完成之后我们可以看到在我们新建的文件夹中出现了一些新文件,点击其中的 _config.yml 并打开。
按照以下格式修改其文件的末尾

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

部署网站

部署网站分为生成页面文件、本地预览和部署文件三个步骤。如果你不需要在本地先预览你的网站,那么可以跳过第二个步骤。

生成页面文件

输入以下命令

1
hexo g

这行命令是根据你修改的配置文件来生成或更新本地的页面文件,每次修改配置后想要部署网站必须先执行这行命令。

本地预览

1
hexo s

复制链接并粘贴到浏览器
注意:不要用Ctrl+C进行复制,不然会直接结束本地预览。
这时我们可以看到,加载出一个标题为Hexo的初始网站。

部署页面

输入以下命令

1
hexo d

至此,我们的网站已经可以供所有人浏览了。我们再次回到刚开始建立的Github仓库中,进入 Settings,点击 Pages,复制你的网址或者直接点击 Visit site 即可访问你的网站。
ppNrpC9.png

个性化

进入Hexo官方网站,进入主题页面,在这里可以选择自己想要的主题模板。
点击图片可以进入预览网站提前预览模板的样式细节,选择好心仪的主题之后点击文字标题进入该主题的Github,作者一般会在里面提供详细的安装过程。如果不想看英文文档可以选择标签带有 #中文 的主题,查看中文文档。

更新与维护

进入Hexo官方网站,进入文档页面,官方提供了详细的中文文档。

2024-08-31 16:10:49
Next