基于Hexo的个人网站搭建教程

文: 许哲欣

分享一个近乎免费的创建个人网站的方法

前言:个人网站是伪需求吗?

艺术生或者艺术工作者大多会想要个人网站,用来讲解自己的艺术创作理念、展示作品集、介绍艺术家简历等等。

不过随着社交媒体的发展、流量垄断和信息茧房的产生,个人网站原本的功能性已经被极大地削弱了。

不仅缺少及时性和互动性,而且也缺少引流——个人网站更趋近于链接着“名片”的后台

加上2020年3月1日开始执行的《网络信息内容生态治理规定》,个人网站已经几乎完全失去了媒体属性。艺术社团的网站也近乎被公众号等社交媒体公众账号所取代。个人网站已经不得不变成单向而静态的内容站。

而个人网站的搭建门槛高——比成熟的网络社交媒体(微博、公众号、ins)高得多。不仅需要基础的互联网工程知识,还需要用户体验和平面设计的知识,后期还需要长期维护。并且,个人网站的内容也会大量复制创作者在其它平台的内容。个人网站就似乎没有依托其它平台建立的理由了,唯一能体现其商业价值的,也就只有域名本身。

那么,个人网站是伪需求吗?

笔者认为,个人网站当前存在的意义,更接近于信息孤岛

  • 个人网站可以给予人的日常学以实践的空间,从而成为一种抵抗外界意识、拒绝自我意识瓦解的手段。

  • 个人网站基于自身的物理壁垒,要么避免自己导向目前的舆论战环境、要么加速这个过程。

在当下这个以蜂群为单位的文化战争中,个体的自我思考过程本身,比思考的内容更显得珍贵。

另外,一个以自我名称的符号为映射入口的对象,可以让主体产生实体错觉——这就是创建个人网站的快感——

哪个程序员不想做技术博客呢?

但这个时代,快感总是很贵的。

免费的快感最贵。

此外,“个人网站”的重音并不在“个人”,而是在“网站”。这是互联网时代的搭台唱戏。有什么比自己搭台自己唱戏更能吸引艺术家们呢?

因此,笔者分享一套基于Hexo + Github的个人网站搭建方法,可谓门槛低、性价比高,让读者可以建立属于自己的个人网站。

注意:Hexo + Github的个人网站只能满足静态网页的需求,即文字、图片、视频展示,以及不大的交互。

如果艺术家想要更复杂的交互效果,还是自己从头搭建网站更合适。


基础准备

制作一个像本站一样的个人网站,你需要准备:

(*建议都安装最新稳定版本)

  1. 注册Github → Github

  2. 安装Git → Git下载链接

  3. 安装Github Desktop → Github Desktop下载链接

  4. 安装Node.js → Node.js下载链接
    注意:一些主题并不支持高版本的Node,可以下载12.14版本

  5. 安装Shell → Shell下载链接

  6. 安装VSCode → VSCode下载链接


安装Hexo

Hexo是一款基于Node.js的静态博客框架,如果需要部分后台,也可以用hexo-admin的插件来实现。此教程只说建立静态网站的部分。

安装Hexo,你需要:

  1. 新建文件夹,这个是你的个人网站所有内容和代码存放的地方。
    注意! 地址不要带有中文
    注意!! Win11会自动注释“桌面”地址为中文,所以也不要把这个文件夹放在桌面。你可以放在例如:D:\Huoshao.github.io,其中的Huoshao替换为你自己的Github注册的用户名

  2. 打开你已经安装的Shell

    在Shell输入cd D:\Huoshao.github.io,这里的地址替换成你自己文件夹的地址

  3. 继续在Shell中输入Hexo安装命令:
    npm install -g hexo-cli

  4. 继续在Shell中输入网站初始化命令:
    hexo init

等待几分钟后,你的网站以及在本地建立完成了!(国内可能链接github较慢导致下载速度慢,可以挂全局模式的VPN)


使用VSCode

VSCode是你设计网站、添加网站主要内容的地方。

使用VSCode,你需要:

  1. 打开你已经安装的VSCode

  2. 点击下图①位置,在搜索框输入“Markdown”,安装箭头所指②和③两个插件

  3. 打开你的个人网站所在文件夹

    这时候你会发现,基础的网站文件已经在文件夹中安装好了


初始化Git和Github Desktop

Git是一个版本管理工具,你可以实现比Ctrl+S更高级的保存(跟着我念:“三步一保存,一生不流泪”)。

如果你想了解更多,可以看廖雪峰老师的教程: 抱廖雪峰学Git

Github是全球最大同性交友网站Git的远程托管仓库,理解为多人免费大型网盘就行。

我们的网站就是依托Github的Github Pages功能部署的。因此需要你的文件夹名称为:你的Github用户名.github.io

初始化Git,你需要:

  1. 打开Git Bush

  2. 在Git Bush里输入
    git config --global user.name "你的GitHub用户名"
    git config --global user.email "你的GitHub注册邮箱"

  3. 在Git Bush里输入
    ssh-keygen -t rsa -C "你的GitHub注册邮箱"
    然后直接三个回车即可,默认不需要设置密码

  4. 找到生成的.ssh的文件夹中的id_rsa.pub密钥,将内容全部复制,注意保护好你的ssh,这个和你的密码是一个等级的东西!

  5. 打开你的GitHub_Settings_keys 页面,新建new SSH Key

  6. 填写SHH key,Title为标题,任意填即可,将刚刚复制的id_rsa.pub内容粘贴进去,最后点击Add SSH key

  7. 打开Git Bush,输入cd D:\Huoshao.github.io,即你的网站代码地址

  8. 打开Git Bush,输入git init
    成功后,你的文件夹里将多出一个隐藏的“git文件夹”

接下来,初始化你的Github:

  1. 打开Github Desktop

  2. 添加你的网站问价夹(即添加仓库)

  3. 在Summary中填写信息,一般写到此为止干了什么,你可以写“Hexo Init”。然后按Commit to master提交

  4. 点击publish repository提交仓库到Github(上传网盘)

    注意!项目名称一定是你的Github用户名.github.io,并且不要勾选Keep this code private

到现在,你已经基本配置完了所有基础工具了,接下来就是令人激动的时刻!!


注册域名

我使用的是namecheap购买的域名,你也可以在阿里云或者亚马逊买,貌似百度也能买(不过风评待定)。

注意:因为个人网站的备案很难,如果买虚拟服务器的话最好买海外的。

在namecheap上买域名,你需要:

  1. 搜索自己心怡的域名,根据自己的财力买下

  2. 购买完后,自己购买的域名进入manager页面

  3. 打开你的Shell,输入ping 你的Github用户名.github.io,获得你的Github Pages的IP地址

  4. 设置DNS:删除掉所有原来的Host Record,并添加3个新的,如图:

    第一个:A Record,Host使用@,将上一步得到的地址输入到Value中
    第二个:A Record,Host使用www,将上一步得到的地址输入到Value中
    第三个:CNAME RECORD,Host使用www,Value使用你的Github用户名.github.io

  5. 打开你的Github的仓库,进入Setting界面

  6. 拉到最底下,进入Github Pages设置

  7. 将你买的自定义域名填进去

域名和基础工具都搞定了,接下来就可以开始做网站了!


网站制作:第一步,基础操作

打开你的Shell

依次输入:清理缓存、生成页面、本地服务器(测试用)三行命令
hexo clean
hexo g
hexo s

此时,你的Shell界面会提示,网站已经在本地运行了!
打开浏览器,访问localhost:4000,就可以看见你最基础的网站了

上面三条命令将是你未来最经常用的命令,可以快速地在自己的电脑上看到运行

但这时候,网站是空空如也的,你还需要一些步骤,将本地的网页布署到Github上:

在Shell中按下Ctrl+ C停止网页的本地服务

在Shell中依次输入:清理缓存、生成页面、网页布署三行命令
hexo clean
hexo g
hexo d

如果不出意外,那么应该就是出意外了——布署失败——因为现在Github仅支持通过token布署

打开Github网站,在个人设置页面,找到Setting

选择开发者设置Developer setting

选择个人访问令牌Personal access tokens,然后选中生成令牌Generate new token

设置token的有效期,访问权限等。选择要授予此令牌token的范围或权限,要使用token从命令行访问仓库,请选择repo,然后生成token即可

注意!!!!
生成的token要及时复制和保存,因为刷新网页的话就不能看到了。注意保护好你的token,这个和你的密码是一个等级的东西!

最后,打开你的VSCode

将_config.yml文件中的deploy下的repo改成你的token@github.com/你的用户名/你的用户名.github.io.git

再次在Shell中执行:清理缓存、生成页面、网页布署三行命令
hexo clean
hexo g
hexo d

之后,在浏览器中输入你注册的域名,或者你的用户名.github.io,就能看到你的个人网站了!

注意1:github的布署不是及时生效的,需要等一段时间才能反应你的修改。如果你查看自己的修改,在本地服务器上看就行(用hexo s命令在localhost:4000上看)

注意2:在生成页面前,最好都用 hexo clean命令清除本地缓存


网站制作:第二步,安装Hexo插件和设置配置文件

  1. 图片显示插件
    ① 在Shell中输入npm install hexo-image-link --save安装图片显示插件
    ② 在VSCode中,修改_config.yml文件中的post_asset_folder: true(找不到的话,在VSCode中按Ctrl+ F搜索post_asset_folder
    ③ 完成的话,每次新建页面时,都会在_posts文件夹下新建页面的同名文件夹,把文章中想插入的图片都保存在这个文件夹里,就能在正文引用了

  2. 永久链接及版权声明插件
    在Shell中输入npm install hexo-addlink --save安装插件

  3. 渲染器插件
    在Shell中输入npm install hexo-renderer-marked安装插件
    在VSCode中,在_config.yml文件最后添加以下代码:

    1
    2
    3
    4
    5
    marked:
    prependRoot: true
    postAsset: true
    xhtmlOut: false # 不必必使用完全的 XHTML 代码,换行可以为 <br>
    breaks: true # 每次回车换行相当于一个 <br/> 标签

网站制作:第三步,安装主题

Hexo的网页制作除了简洁优美外,还因为丰富的主题而知名。你可以选择自己喜欢的主题安装。可以在Hexo官方网站上看到大家开发的主题。

github上star数最多的主题是Next主题

本站使用的是Fluid主题,后续开发教程也会基于这个主题

安装Fluid主题也很简单:

① 在Shell中输入npm install --save hexo-theme-fluid安装主题

② 在根目录下创建_config.fluid.yml文件,将主题的_config.yml 内容复制进去

③ 修改_config.yml文件中的theme: fluid,将主题改为fluid


网站制作:第四步,主题详细设置案例

本网站基于Fluid主题的教程,详细请看官方文档

所有主题相关的设置都在_config.fluid.yml文件中,如果我们想更换主题的头图,需要:

  1. 在本地的source文件夹中,新建名为img的文件夹

  2. 想需要替换的头图图片文件,放在这个新的img的文件夹中

  3. 将config.fluid.yml文件中的banner_img修改为你的文件

  4. 注意,冒号后面要有空格

这样,就可以更换头图了。

根据官方文档中的引导,你可以详细设置自己的网页效果。

如果觉得这个主题不合适,也可以选择其它的主题。


网站制作:第五步,写文章

新建一个新文章很简答,在Shell中输入:
hexo n "新文章"

在_posts文件夹中会出现一个新文章.md的文件,这时候用VSCode中就可以直接编辑这个md文件,从而得到你的文章网页

Hexo的文章基于Markdown书写,书写规则可以在帮助文档中查看。

因为我们在VSCode中已经安装了Markdown插件,你可以直接在VSVode中浏览书写结果


结尾

之前在知乎上看到一个很有意思的说法,个人网站是“生平纪念网”。

我们喜欢教“赢”的教育,殊不知,人的天性中的“赢”,是一种思维结构,根本不需要“教育”。

但赢和输两段回忆,就像自此分支的两个平行宇宙,一个是往后骄傲的底气,一个可能是终生的负担和遗憾。

如果人生有存档点多好啊——

个人网站也许就是在人生的脱机存档点。尽管这个文件不能运行。

事实上,人生又何尝真正有下次呢,我们只能全身心地把这次活的精彩。兜兜转转,最终还是“不念过去、不畏将来”。

最重要的是,赢了,也是这么办。

祝大家都能做个好的个人网站。


基于Hexo的个人网站搭建教程
http://xzxthu.github.io/xzxthu.github.io/2022/02/10/HexoGuide/
Author
Kyo
Posted on
February 10, 2022
Licensed under