如何快速搭建个人网站？

日期：2024-12-26 作者：wangqingfan2008 移动：http://ljhr2012.riyuangf.com/mobile/quote/25419.html

作者 l 白色蜗牛

如何快速搭建个人网站？

来源 l 蜗牛互联网（ID: woniu_internet）

转载请联系授权（微信ID: 919201148）

近期精彩文章：福利！iPhone 256G免费送

前言

建网站本身是一个很大的工程，涉及前端页面的搭建，网站数据的存储，还要购置服务器资源，甚至是后期的维护，过程相当繁琐。

不过如果仅仅是想搭建个人的网站，写写博客，想要美观，又不想操心太多和写博客无关的事情。那么，Hexo + Kaze + Gitee Pages 的方式就很适合你。

前置要求

Node.js（版本 10.13 以上，建议使用 12.0 以上版本）
Git

安装 Git

Windows：下载并安装 git^[2]。
Mac：使用 Homebrew^[3] 安装。
Linux（Ubuntu，Debian）：
Linux（Fedora，Red Hat，CentOS）：

安装 Node.js

Node.js 为大多数平台提供了官方安装程序^[4]。

替代安装方法：

Windows：使用 nvs^[5] 安装它。
Mac：使用 Homebrew^[6] 安装。
Linux（基于 DEB / RPM）：与 NodeSource^[7] 一起安装。
其他：通过相应的软件包管理器进行安装。请参阅 Node.js 提供的指南^[8]。

安装 Hexo

运行 hexo

初始化操作

使用指令就可以在指定文件夹下建立站点信息，我一般用域名做名称，如下：

_config.landscape.yml：自定义的主题配置文件，此处的 landscape 是默认主题。配置其他主题可以参考这种方式。
_config.yml：站点全局的配置文件。
node_modules：node 模块文件夹。包含可执行文件和依赖的资源。
package-lock.json：node_modules 文件中所有模块的版本信息，模块来源。
package.json：Hexo 框架的基本参数信息以及它所依赖的插件。
scaffolds：scaffolds 原意是脚手架，这里可以理解为模板文件夹。当你创建新的文章时，Hexo 会根据该文件夹下的对应文件进行初始化构建。
source：资源文件夹。这里是你放自己资源比如博文和图片的地方。文件夹下的 Markdown 和 HTML 文件会被解析并放到文件夹下。其他文件或文件夹，如果开头命名不是 (下划线)，也都会被拷贝过去。
themes：主题文件夹。Hexo 会根据主题来生成静态页面。

基于这样的结构，Hexo 就具备了生成静态网站的能力。

本地启动

核心配置

以下是我们需要了解或者修改的配置信息。

package.json

这个文件列出了 Hexo 的基本参数信息以及它所依赖的插件。可以看到，EJS^[9]，Stylus^[10] 和 Markdown^[11] 渲染器都是默认安装的。

如果后边要切换主题，记得把最后一个默认的主题依赖删除掉。

_config.yml

参数描述网站标题网站副标题网站描述，用于 SEO网站的关键词，支持多个关键词。文章作者。网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有和。网站时区。Hexo 默认使用你电脑的时区。请参考时区列表^[12] 进行设置，如 , , 和。一般的，对于中国大陆地区可以使用。

参数描述默认值网址, must starts with or http://example.com网站根目录，如果放子目录，设置 /文章的永久链接^[13] 格式永久链接中各部分的默认值
改写 `permalink`^[14] 的值来美化 URL
是否在永久链接中保留尾部的，设置为时去除是否在永久链接中保留尾部的 , 设置为时去除 (对尾部的无效)

参数描述默认值资源文件夹，这个文件夹用来存放内容。公共文件夹，这个文件夹用于存放生成的站点文件。标签文件夹归档文件夹分类文件夹Include code 文件夹，下的子目录国际化（i18n）文件夹跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到目录中。

参数描述默认值新文章的文件名称:title.md预设布局post在中文和英文之间加入空格false把标题转换为 title casefalse在新标签中打开链接true在新标签中打开链接对整个网站（）生效或仅对文章（）生效需要排除的域名。主域名和子域名如需分别配置把文件名称转换为 (1) 小写或 (2) 大写0显示草稿false启动 Asset 文件夹^[15]false把链接改为与根目录的相对地址，建议使用绝对地址。false显示未来的文章true代码块的设置, see Highlight.js^[16] p for usage guide
代码块的设置, see PrismJS^[17] p for usage guide

参数描述默认值默认分类分类别名
标签别名

参数描述默认值日期格式时间格式当 Front Matter 中没有指定 `updated`^[19] 时的取值，支持 mtime(文件最后修改时间)，date(使用 date 的值)，empty(不指定)

参数描述默认值每页显示的文章量 (0 = 关闭分页功能)分页目录

参数描述默认值当前主题名称。值为时禁用主题landscape主题的配置文件。在这里放置的配置会覆盖主题目录下的中的配置无初始配置部署部分的设置
Meta generator^[20] 标签。值为时 Hexo 不会在头部插入该标签true

【部署】

配置如下：

参数描述默认库（Repository）地址
分支名称 (GitHub) (Coding.net) (others)自定义提交信息)Optional token value to authenticate with the repo. Prefix with to read token from environment variable

常用指令

创建文章

使用以下指令：

监视文件变动立即重新生成。该操作会阻塞命令。

生成完毕后自动部署网站。

部署

Hexo 提供了快速方便的一键部署功能，让你只需一条命令就能将网站部署到服务器上。

或者简写为：

为什么选择 Kaze

Hexo 默认主题为 landscape，但我觉得不够美观，这里推荐 kaze^[21] ,它有以下特性：

响应式设计，适配桌面端、平板、手机等各种设备
前端性能优化，加载快速，眨眼之间即可加载完成
- 图片懒加载，应用懒加载技术加快页面的生成速度
- 资源压缩，提升本地资源请求速度
- 精简设计，不包含 Jquery 等额外库
支持侧边栏小组件，例如最近文章，作者卡片
暗黑模式，享受黑夜的魅力
代码高亮，支持 prismjs
公式渲染，支持 katex 和 mathjax
评论系统，集成 valine、gitalk 和 livere
访问量统计和谷歌分析支持

安装 Kaze

主题配置

可在该主题目录下的 _config.yml 文件里配置。

主题颜色

在 color 中进行配置，以下是默认值。

字号与字体

在 font 中进行配置，以下是默认值。

站点访问量统计

访问量统计目前仅支持不蒜子，默认关闭，可统计站点总访问量和总访客数。

数据分析

开启分析支持（默认关闭）

type 目前仅支持 google

有关谷歌分析的具体使用说明和使用可以参考谷歌文档^[22]

首页

文章头图

在文章中可以设置首页头图

小组件

: 在窄屏幕上是否显示小组件，关闭（默认），开启

关于

关于页面需要自行创建，在站点中新建文件夹并在文件夹内创建，该文件至少需要包含

社交链接

文章页

搜索功能

开启搜索功能（默认开启）
文件名称（暂无用处）
需要搜索的范围，支持 posts | pages | all
搜索文件是否包含正文内容（不建议开启，包含所有文章内容这样会使得搜索文件异常巨大）替代方案是搜索分类标签或使用 algolia 等第三方搜索服务（Todo）

代码高亮

参见代码高亮文档^[25]

数学公式

主题支持和两种渲染引擎，具体参见相关文档^[26]

copyright

开起版权说明（默认开启）

作者id，如果不填则会使用主题配置 author 或站点配置 author

声明内容样式，与 note 样式相同

Front-matter

banner_img

设置文章与首页头图

banner_img_set

在图片加载时预先加载的图片，可以设置为 loading 图或缩略图等

excerpt

为文章设置在首页显示的简介，还可以通过来控制显示

字数统计

主题集成 hexo-wordcount^[27] 插件，在主题配置文件中设置

开启（默认开启）

图片画廊

图片画廊功能基于 fslightbox^[28]，在主题配置文件中设置

开启（默认开启）

标签插件

主题集成了一些标签方便书写

note

在文件中如下书写即可

为什么选择 Gitee Pages

GitHub 和 Gitee 都提供免费的静态网页托管服务。我们可以使用 GitHub Pages 或 Gitee Pages 托管博客、项目官网等静态网页，这样就省去了购买服务器的钱，也不需要耗费太多精力维护。

GitHub Pages 使用很广泛，我之前也用过，不过访问不够稳定，会影响页面加载速度。Gitee 是国内版的 GitHub，访问速度优秀，并且国内发展势头不错，因此我选取 Gitee Pages 来托管我的网站。

建立仓库

注意：仓库内容有变化，需要手动触发更新，页面才能真正生效。

连接仓库

Gitee 、GitHub 提供了基于 SSH 协议的 Git 服务，在使用 SSH 协议访问仓库仓库之前，需要先配置好账户/仓库的 SSH 公钥。

然后本地生成 SSH 公钥，邮箱为刚配置好的账户：

生成后可查看 SSH 公钥：

Hexo: https://hexo.io/docs/

[2]

git: https://git-scm.com/download/win

[3]

Homebrew: https://brew.sh/

[4]

官方安装程序: https://nodejs.org/en/download/

[5]

nvs: https://github.com/jasongin/nvs/

[6]

Homebrew: https://brew.sh/

[7]

NodeSource: https://github.com/nodesource/distributions

[8]

指南: https://nodejs.org/en/download/package-manager/

[9]

EJS: https://ejs.co/

[10]

Stylus: http://learnboost.github.io/stylus/

[11]

Markdown: http://daringfireball.net/projects/markdown/

[12]

时区列表: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

[13]

永久链接: https://hexo.io/zh-cn/docs/permalinks

[14]

: https://hexo.io/zh-cn/docs/variables

[15]

Asset 文件夹: https://hexo.io/zh-cn/docs/asset-folders

[16]

Highlight.js: https://hexo.io/docs/syntax-highlight#Highlight-js

[17]

PrismJS: https://hexo.io/docs/syntax-highlight#PrismJS

[18]

Moment.js: http://momentjs.com/

[19]

: https://hexo.io/zh-cn/docs/variables#页面变量

[20]

Meta generator: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#属性

[21]

kaze: https://demo.theme-kaze.top/

[22]

谷歌文档: https://analytics.google.com/

[23]

iconfont: https://www.iconfont.cn/

[24]

文档: https://hexo.io/docs/helpers#toc

[25]

高亮文档: https://demo.theme-kaze.top/highlight/

[26]

相关文档: https://demo.theme-kaze.top/latex/

[27]

hexo-wordcount: https://github.com/willin/hexo-wordcount

[28]

fslightbox: https://fslightbox.com/

[29]

hexo-deployer-git: https://github.com/hexojs/hexo-deployer-git

特别提示：本信息由相关用户自行提供，真实性未证实，仅供参考。请谨慎采用，风险自负。

点赞 0举报收藏 0评论 0

0 条相关评论

相关最新动态

推荐最新动态

点击排行