建站记录 | 雪之湖畔-SnowyLakeSide

建这个网站的初衷是因为自己知乎被连续封了几次, 以至于让我对这类非可控的平台产生了大量不信任感, 再加之我个人的知乎账号掺杂了大量的非技术相关内容, 所以尽管我在知乎也写了一些技术文章, 但仍并不方便将来贴在简历上.
总总原因驱使下, 在综合考量了云服务器+Wordpress和GitHubPages+Hexo两种方案后, 我还是选择了更为轻便的后者, 毕竟对我而言只是需要一个发布文章与随想的、完全可控的平台罢了, 没必要去折腾什么服务器.
技术选型到此为止, 剩下的便是具体实现了. 这篇文章便是用来记录我的建站流程以及踩到的一些小坑.
顺便一提, 这个网站就叫作SnowyLakeSide好了, 中文名雪之湖畔, 一个独属于我(SnowyLake/雪湖)、面向互联网的小小浅滩.

Github Pages创建

这一步非常简单, 其实本质就是创建一个名为 snowylake.github.io 的repo, 只是要求前缀与github用户名相同. 创建之后实际上我们就已经可以通过repo名访问网站了, 但应该是空空如也的.
然后就可以暂时放在这里不管了, 甚至都不需要clone到本地.

应用Hexo框架本地搭建部署环境

Hexo是一个基于Github Pages的博客发布工具, 支持Markdown, 功能简洁而强大, 生态繁荣插件众多, 久经验证, 是基于Github Pages建站的不二之选.

安装与初始化

在安装Hexo之前, 还是需要先装一个Node.js才行: https://nodejs.org/zh-cn/download
装好之后进入命令行安装Hexo:

1	$ npm install -g hexo

本地创建一个文件夹用来部署Hexo和存放网站内容, cd进去初始化Hexo:

1 2	$ cd D:/Workspace/Blog $ hexo init

初始化之后的文件结构大概是这样的:(下图已经是生成完毕后的工程目录了)

几个比较重要的部分:

.deploy_git: 最终生成的github repo
node_modules: 通过npm安装的各种包
public: 生成的网页文件夹
scaffolds: 创建新博客用的模板
source: 网站实际内容, 以md的格式保存, 通过这个文件夹去生成public
_config.yml: Hexo的配置文件, 各种设置都需要在这里开启

生成与推送

第一次初始化的时候hexo已经帮我们写了一篇名为Hello World的文章, 不过这里还是尝试自己创建一篇.
首先在_config文件中配置网站的基础内容:

# Site
title: 雪之湖畔-SnowyLakeSide
subtitle: 'Before it begins, the war we all fear.'
description: 'Graphics Developer, Talk Artist.'
keywords: "" #貌似没用?
author: SnowyLake
language: zh-CN
timezone: 'Asia/Shanghai'

# 自己网站的地址
url: http://snowylake.net

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: git@github.com:SnowyLake/snowylake.github.io.git
  branch: main

在开始正式创建网页时, 还需要装两个包:

1 2	$ npm install hexo-renderer-marked --save $ npm install hexo-relative-link --save

以及在_config页面修改/添加:

# Writing
post_asset_folder: true

# 以下为添加内容
marked:
  prependRoot: true
  postAsset: true

这部分修改可以使创建博客时自动创建同名文件夹用于存放图片, 并可以通过以下形式在本地和网页中正常引用图片:

同时, 如果md编辑器是VSCode的话, 还需进行如下设置, 保证向文本中copy图片可以直接保存到同名文件夹下:

准备工作完成后, 就可通过此命令创建博客了, 命令将在Blog/source/_post下创建HelloWorld.md文件和同名文件夹.

1	$ hexo new "HelloWorld"

之后就可以进行第一次的生成与推送:

1 2	$ hexo g $ hexo d

常用Hexo命令:

#生成public文件夹
$ hexo generate
$ hexo g #简写

#向github推送
$ hexo deploy
$ hexo d #简写

#本地预览网站
$ hexo server
$ hexo s #简写
$ hexo s --debug #debug状态下本地预览网站

#新建文章
$ hexo new "postName"

#新建页面(后续演示)
$ hexo new page "postName"

#生成并本地预览
$ hexo s -g

#生成并推送
$ hexo d -g

Next主题配置

安装与配置Next

1 2	$ cd D:/Workspace/Blog $ git clone https://github.com/next-theme/hexo-theme-next themes/next

在Hexo目录下的_config.yml(hexo config)中添加配置:

切换主题:

添加博客头像、背景与透明

将博客头像保存在在Blog/themes/next/source/uploads下, 然后在themes/next目录下的_config.yml(主题config)中配置:

将网站的背景图片保存在Blog/source/images下;

在Blog/source下新建文件夹_data, 并创建文件styles.styl:

//背景图片设置
body {
    background-image: url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

//整体透明
:root {
  --content-bg-color: rgba(255, 255, 255, 0.8);
}

//文章背板的颜色rgb
.main-inner > .sub-menu, .main-inner > .post-block, .main-inner > .tabs-comment, .main-inner > .comments, .main-inner > 
.pagination{ }
//主体字体颜色
body{                               
  color: rgba(0, 0, 0, 1);
}
//文章标题颜色
.posts-expand .post-title-link {    
    color: rgba(0, 0, 0, 1);
}

//搜索框透明
.popup {        
  opacity: 0.9;
}