建站回顾

0.日本語要約

初めはAWSを独学中に、偶然にLiu YuchenというブロガーさんのCloud Practitioner資格試験に関する記事に出会い、ついでに彼が書いた「サルでもできるHexo個人ウェブサイト構築ガイド」を読んでみました。記事には「初心者でも30分以内に自分の完全な個人スペースを構築できます」と書いてありました。当時、HTMLとCSSを半月学んでまだ初心者だった私は、迅速に成果を見たかったので、彼の言葉を信じました。結果的に、ガイドを読み始めてからウェブサイトができたまで、実際には約3日かかりました。3日とは言っても、途中で中断することが何度かあったにもかかわらず、自分の思った初心者と他の人の思った初心者との違いを理解しました。ウェブサイトの構築のほぼすべてのステップで、Google、chatGPT、YouTubeの間を行ったり来たりしていました。したがって、どんなガイドも枠組みに過ぎず、初心者の純度が高いほど、補完しなければならない内容が多くなります。

今回の投稿は、私自身がブログの構築経験を振り返ったものです。Hexoという静的サイトジェネレータと関連する概念を学び、Node.jsなどのツールを使用して、最終的に自分のウェブサイトを完成させました。中には、私の実際の経験も含まれており、ツールの準備方法、ローカルウェブサイトの作成、GitHubへのアップロード、カスタマイズ、ブログの執筆などが記載されています。また、画像の読み込みに関する問題に直面した際の課題や、ガイドを書いたブロガーやテンプレートの寄稿者への感謝の意も述べられています。今後、ウェブサイトには多くのアイデアを実現したいと考えており、それにはゆっくりと試行錯誤する必要があります。重要なのは、ウェブサイトそのものよりも、ウェブサイトを実現する過程で得られるスキル、経験、喜びかもしれません。


1.入坑

首先需要说明的是,本文并非建站指南或教程,只是用作个人回顾。和我一样想要自己建站的0经验朋友,可以读读第1和2部分了解大概流程。另外,有图片加载问题的朋友可以参考倒数第二三段落。

最初是在自学AWS的过程中,偶然看到Liu Yuchen(知乎元宇宙战士)的Cloud Practitioner资格考试相关博文,于是顺便看了看他写的《猴子也能做到的Hexo个人建站指南》。文中说,“0经验者在30分钟内搭建完全属于自己的个人空间”。作为当时刚学习HTML和CSS半个月还嗷嗷待哺的婴幼儿,希望快速看到成果的我,信了他。结果,从开始读指南到建成网站,实际花了大概3天。

IT人的嘴,骗人的鬼。

虽然三天也是断断续续,但仍然使我明白了,我的0经验和别人的0经验之间,差了一座珠穆朗玛峰。建站的几乎每一步,我都在Google、GPT和YouTube之间反复横跳。所以,任何指南都只能是框架,0经验的纯度越高,需要自己补充的内容就越多。


2.概念和步骤

我首先让GPT用比喻的方式,给我解释了Hexo建站过程中的各种概念的含义和关系:

简单来说,就是用Hexo这个静态网站生成器生成网站本体,然后部署到Github的仓库里,使得别人能通过url访问网站。这类似于一个预制房的过程:把房子修好,摆到预定位置。

【土地/地基】:GitHub(的仓库)。可以把GitHub当做一个代码托管平台,它提供了一个地方来存储和管理网站代码。你需要在GitHub上创建一个仓库(repository),将(由Hexo生成的)网站代码存放在其中。Github账号注册和仓库创建方法均可自行GPT。

【建筑工人/施工队】:Node.js。Node.js是一个运行JavaScript的平台,类似于施工队,它允许您使用JavaScript做后端,构建服务器端的应用程序。这里不必深究原理,反正从官网把长期维护版下载安装好就行了。

【建筑工具】:Hexo。Hexo是一个静态网站生成器。所谓静态,就是任何人看到它的内容都是一样的。动态网站则会根据不同人显示不同内容。使用Hexo做前端,可以编写和管理网站内容,将内容转化为网页,并生成网站的各个部分,如文章、页面、导航等。Hexo的安装需要在命令行中进行。方法见官网。

【房屋装饰风格】Hexo theme。Hexo主题是一种用于美化和定制Hexo生成的网站外观和风格的模板。它决定网站布局、样式和交互效果。由于有大量中文区开发者为Hexo贡献主题,遇到问题容易用中文找到解决方法。在 官网可以选择需要的主题。

综上所述,在建立网站的过程中,GitHub提供了代码托管和版本控制的基础,Node.js负责网站的后端逻辑和功能,Hexo作为静态网站生成器帮助创建网站内容和结构,而Hexo主题则决定了网站的外观和风格。这些工具和技术相互配合,共同构建出一个完整的网站。

所以,Hexo建站就是一方面下载安装好Node.js,Hexo,Hexo主题等工具;一方面在GitHub上新建仓库,当用Hexo准备好网站内容后,就把它整体上传(即部署)到GitHub的仓库中。


3.实操

a.准备工具:

一开始为了让自己的URL好看一点,我注销了以前的GitHub账号,重新注册邮箱,用新邮箱注册了新的GitHub账号。接着在GitHub创建仓库,在电脑里安装Node.js、npm和Hexo,并在油管看了不少Node.js和静态网站生成器的介绍。

看到博客原稿需要用Markdown(轻量级标记语言)来写,而指南建议花30分钟学习一下的时候,我嗅到事情有点不对劲。刚才不是说建站全过程只要30分钟么?于是我又在谷歌上搜索Markdown教程,看到有人说10分钟就能学会。最后我找到一款在线Markdown教程,支持多语种,而且可以直接在浏览器看到练习效果,非常好用。

事实证明,这个tutorial大概花了我1个小时。考虑到自己的漫不经心,智力正常的朋友的确可能在10-30分钟内完成。不过回过头来看,当我部署好网站时,早就把Markdown忘光了。所以建议想建站的朋友,可以等网站部署好之后,边学Markdown语法,边写博客原稿。实际上,字号、斜体、粗体、插入链接和图片等最基本的几个语法,完全足够应付一般博文,没必要系统学习Markdown。

b.创建本地网站并上传:

工具都准备好后,就开始建站。首先在命令行中新建(初始化)一个文件夹(网站根目录,这里我命名为lais_chronicles),建站需要的所有代码数据都会存在这里。最后上传到GitHub仓库的,就是这个文件夹的全部内容。

$ hexo init lais_chronicles

接着在命令行中下载选好的主题(TKL为主题名):

$ npm install --save hexo-theme-TKL

一开始本来是想选择和指南作者相同的fluid主题,但无论如何生成出来都是默认的pure主题。由于问题一直解决不了,而TKL主题则一次就成功了,所以就妥协了。

下载好后,需要进入根目录的_config.yml文件中将“theme:”后面修改为“hexo-theme-TKL”,网站的装饰风格就确定下来了。接下来,在命令行键入“hexo server”(简写:hexo s),这样就可以在浏览器中输入网址(http://localhost:4000/) 预览网站的外观了。但这个时候,网站还只是存放在本地的,别人无法通过URL访问。

这时需要把预制好的房子放到预定的土地上。也就是要将本地的网站数据,部署(上传)至GitHub。在执行部署命令前,需要在前述的根目录的_config.yml文件中进行设定修改,建立好本地文件夹和GitHub仓库之间的通道,具体操作可结合猴子指南的一键部署以及Hexo官网

设置好上述通道后,就可以开始部署网站数据了。一般采用“hexo clean”, “hexo generate”(缩写:hexo g), “hexo deploy”(缩写:hexo d)这三行命令来完成部署。这时,本地的网站数据就上传到了GitHub仓库。

c.个人定制:

虽然借用了别人的主题,但也可以通过一些修改来实现最小程度的个性化。比如最简单的封面背景图,标题,字体,菜单,签名,favicon(网站图标)等等。对比一下我的网站和主题设计者Kieran的网站就能看出区别。这些修改需要最最基本的HTML和CSS的知识。如果没有,那就需要花几天学学了。自己的笨办法是,先在网页上右键“检查”找到想改的内容,然后回到本地修改代码,接着重新hexo s, hexo g, hexo d三步部署。至于要修改成什么样,完全是遵循自己的审美喜好。

本站的背景图是在水族馆拍下,经简单滤镜操作的结果。图标的企鹅则是配合背景图,无任何含义。制作方式是用任意图像软件把企鹅的轮廓抠出来,然后用免费的在线格式转换器将png转换成ico格式。上传图片和图标也是出过很多匪夷所思的错误。每次部署完都要间隔一段时间才能看到效果。但每次成功都很满足。

d.博客写作:

相比技术操作,文字书写是心态最舒畅的一个过程。首先还是用word写完文章。用hexo new blog_est可以创建名为blog_est.md的markdown文件。然后就可以在任何文本编辑器中打开这个文件,把文章粘贴进去进行格式修改。这个部分可以迅速完成。

e.图片加载问题

最闹心的实际是图片无法加载的问题。 图片大小,图片路径,图片格式等等可能性都考虑了。用HTML语法;在_config.yml中修改post_asset_folder;插件;微博图床… 网上的方法能找到的都试了个遍,仍然无法解决问题。最后还是简单粗暴地直接引用URL:确保要用的图片已经存在于博客根目录的source文件夹中;用hexo clean && hexo d完成部署后,直接在GitHub的仓库里找到图片,打开它,右键复制地址。然后在博客的markdown文件中使用这个地址,最后再部署一遍。对,为了显示个图片,部署了两次。

需要说明的是,即便能够加载成功,也不意味着能够迅速打开网页。直到现在,网站的加载速度仍然非常不理想,待以后找到解决办法再回来补充。


4.最后

非常感谢《指南》的作者Liu先生以及贡献主题TKL的Kieran,以及无数免费资源的提供者们。后续对网站还有很多想法想要实现,需要慢慢摸索。重要的也许并不是网站本身,而是实现网站的过程中收获的技能,经验,耐心,烦躁,喜悦,平静。