建站手记
以下内容仅供参考。
配置环境
本站基于Hexo
框架和Butterfly
主题建立,在此基础上进行了一系列魔改和美化。以 Windows 操作系统为例,需要配置的环境如下:
Node.js
,没什么好说的,注意下载最新版的,按照官网的提示下载即可。官网链接:Node.jsGithub
,需要注册一个账号,然后创建一个名字类似于username.github.io
的仓库,其中 username 是注册的用户名。- 安装
Hexo
,按照 Hexo 官方文档,还需要下载Git
。Git
八百年前下的,网上一大堆教程,照着安装就行。cmd 命令行中键入以下命令安装 Hexo:遇到问题记得去看官方文档:hexo官方文档1
npm install -g hexo-cli
- 安装
Butterfly
,主题的话完全可以自选,Github 上有挺多不错的,这里我选用的 Butterfly。丢个链接在这,Butterfly
建站流程
folder
是建站的目录文件夹。用以下命令初始化:
1 | hexo init <folder> |
初始化后文件夹下应该有如下结构:
1 | . |
官方文档这块写得有点迷,简单说一下。_config.yml
是整个网站的配置文件,比如网站标题、副标题、语言和作者的设置等等。/source/_posts
下存放写的原始博客内容,内容需要用 Markdown 来写。theme
文件夹下放主题相关的内容,下载的主题内容(比如我用的 Butterfly)存放在该文件夹下。键入以下命令:
1 | hexo new "helloworld" |
_post 文件夹下应该会创建一个 helloworld.md 文件,之后编辑即可。写好后再键入命令:
1 | hexo generate |
hexo generate
会把源 md 文件解析成 html 文件存放在 public 文件夹下。hexo server
开启服务,可用于在本地查看更新后的博客内容。输入url:localhost:4000即可看到网页内容。但到此为止网页还是本地的,可以白嫖GitPage的免费资源(简单说就是Github帮你托管一个网站)。具体来说,就是把网页内容(即项目根目录下的内容)上传到之前提到的username.github.io
的仓库。但并不是每改一次就需要上传一次,而是用过deploy来一键部署。具体来说,在cmd中键入以下命令:
1 | npm install hexo-deployer-git --save |
然后需要配置_config.yml中deploy部分的参数,即deploy到哪个仓库url。我自己的参数示例如下:
1 | # Deployment |
之后用hexo deploy
部署到 Github 仓库。然后输入网址:username.github.io
,即可看到创建的博客内容。至此,第一篇博客创建成功。如果使用 Butterfly 的话,下载后则需要配置_config.butterfly.yml
文件。这些东西都有那个文档的,直接搜来看就行。
后续完善
到此为止,博客已经成功搭建且可以通过username.github.io正常访问,已经是实打实的网站了。(再也不是localhost青春版了)但这个域名太丑,同时gitpage在国内的访问速度着实感人,可以选择用下面两种方式来解决。
用Vercel托管
Vercel是一个免费托管静态网站的在线平台,直接Google即可搜到,但貌似最近被墙了。首先是需要去Vercel网站上导入自己的github项目,即username.github.io那个。这里建议买个便宜的域名,只要不是.com之类的牛马后缀,选一些小众的一年花不了多少钱,阿里云腾讯云都可以。然后配置Vercel项目中domain的内容,把自己的域名指向Vercel服务器。同时在域名服务商那边添加A记录或者CNAME记录。
买云服务器
其实不是特别推荐为了一个博客网站单独去买一个云服务器,我最初有这个想法还是因为博客内容越写越多,Vercel服务器加载资源也开始慢了,想着用云服务器会不会好一些,事实上并没有优化甚至更慢了()。Vercel托管的挂梯子访问会很快,不挂梯子就会一直转圈。最终换来换去,发现还是自己网页做得太垃圾,神仙难救了只能说,前后端的东西懂得太少,性能优化上还有很大的上升空间。还是写一下云服务器部署的大致流程吧。
- 虚假目的:服务器来跑网站
- 真实目的:鼓捣Linux
这种方式涉及到的步骤就更多更复杂了。需要买域名、买服务器、ICP备案、配置服务器信息、安装Nginx等等,只不过也算是真真正正地自己搭了一个网站并访问服务器的网站资源。具体步骤可以参考下面这个链接,感觉已经很详细了。hexo博客部署到云服务器