小白零成本搭建个人网站教程：从博客到自由实验空间的完整指南

hwyzw 发表于 2024-12-29 14:21:42

写给新手和我以前的自己，他们想要拥有自己的网站但没有资金成本。

前言

虽然是网站，但对于个人来说，一般可以称为博客。

但我不希望它只是一个博客，而是一个脱离我自己的现实生活的地方，在那里我可以自由、实验、不怕别人的眼光，甚至可以随心所欲。

当然，这本质上是一个新手教程，可能感觉有点科普的感觉。

我会整体介绍一下网站建设的过程以及所使用的技术和步骤（因为我想展开，如果轶事太多，太复杂了，我就停止了），让你了解这个东西它在网站的发展中起到什么作用？

但我不会详细介绍，例如如何注册帐户以及安装过程中如何单击“下一步”。

希望之前对此毫无了解的新手读完这篇文章后，能够建立一个属于自己的网站。（前提是会基本英语单词并善用搜索引擎）

已经有基本了解的同学可以跳过阅读或者直接关闭。

大部分评论都是相关的补充说明，对正常流程没有影响。如果你不感兴趣，你可以跳过它。

任何与文章相关的问题都可以在本文中评论，其他问题可以在相应的项目或文章下评论。

我会尽力保持本文中使用的技术和实践的更新，并随时接受更正。

安装 Node.js 的关键字步骤

什么是 Node.js？这得从什么是JS说起，JS是什么。（为什么感觉是从盘古创造开始的？）没错，就是网页的盘古。它是一种编程语言，几乎我们在网页中看到的所有交互和逻辑处理都是由它完成的。语法简单，易于学习和使用。（当然，请不要小看它，虽然它的进入门槛较低，但它的上限也非常高。包括但不限于网站前后端、移动桌面应用、机器学习、计算机图形学的实现，等）Node.js诞生之前，都是运行在浏览器端。换句话说，它是一条鱼，而浏览器是一个装满水的水箱。 2008年，V8诞生。 2009 年，Node.js 诞生。并成为早期最著名的开源项目。也许你已经知道了一些，所以我稍后再讲。 .js是基于V8引擎的运行环境。（当我第一次看到这句话时，我很困惑。）根据我的理解，它是一条鱼，V8是一个水泵，Node.js将这个水泵安装在你的计算机上。那么你的电脑上也有Node.js这个类似于浏览器的水箱了，你可以在里面运行它！当然，Node.js由于自身的定位和一些历史原因，与浏览器之间存在一些差异，因此不再展开。

建议下载长期支持版本而不是当前发布版本（因为如果是最新版本，很容易出现一些奇妙的bug）。

全部默认下一步安装。

打开 macOS 的命令提示符或终端。（==，不懂请自行百度。）

Linux 用户关闭右上角的此选项卡。

如果后面提到输入命令，就会默认打开终端进行输入。

输入节点--。如果获取到的版本号与刚刚安装的版本号一致，则说明Node.js已安装成功。

Git 和安装 Git

代码，简称VS Code。目前最强大的编辑器，轻量且快速。（宇宙第一编辑器）注：不是我们常听到的VS。 VS常指功能强大的IDE（集成开发环境），其规模比VS Code大一个数量级。。

在此之前，我建议您先安装它。因为在安装Git Bash时，可以将VS Code设置为默认编辑器。

Git是由Linus（也是Linux的作者）开发的一个开源分布式版本控制系统，用于管理Linux开发。简而言之，它是一个版本管理工具。例如，如果设计师设计了海报的第三个版本，但客户说他还想要第一个版本，那么他可以通过Git快速回滚到原始版本。你只需要告诉Git每次变更的状态（Git会自动检测，你只需要掌握几个基本命令），而不用为每个版本保存一个压缩包，这样既方便又可以节省很多钱。空间。（当然，这主要只适用于代码文本，因为Git的本质就是记录每一行代码的加减，如果是视频或者海报之类的二进制文件，就不会表现出任何优势了。当然，您还想处理这种情况。）

下载安装（如果国内速度太慢可以尝试一下）

macOS用户可以从官网下载安装包进行安装，也可以直接从App Store安装Xcode（会安装Git，但比较大）。

类似的工具还有：SVN。但始终推荐使用 Git，因为它更强大，并且背后有更强大的生态系统：。

登记

一听就觉得和Git有关系。 Git在英文中的意思是懒惰者、失败者。 Hub的意思是中心或枢纽。例如，USB集线器就是USB集线器。所以它是混乱的中心（大雾）。它是全球最大的开源项目和代码托管平台，也是众多开发者的交流场所。它也是世界上最大的同性交友网站。代码托管本身使用了上面提到的Git技术。

注册一个帐户。（虽然都是英文，但是不用害怕，也不会对使用造成障碍，只要记住最常用选项的含义，好好利用手边的翻译软件就可以了。）

注：注册时的英文用户名将成为您可以使用的免费域名前缀。

登录。

为什么要使用它？对于平民玩家来说，当他们第一次尝试建立自己的网站时，他们可能没有闲钱或决心购买自己的服务器和域名。提供此项服务。用户可以使用该服务部署自己的静态站点。

点击右上角的+ -> 新建，新建一个仓库。

@2x.png

因为这里已经有同名仓库了，所以提示我重复。

仓库名称必须是你的用户名..io。用户名是英文的。大小写无关紧要，但建议使用小写字母。（因为时不时切换case你会觉得很麻烦）

为什么要用这个作为仓库名称呢？ Pages服务的命名约定，也将成为您的专属域名。当然，您也可以购买自己的域名并用它来提供内容。

点击。

安装 Hexo

为什么使用 Hexo？ Hexo 是一个基于 Node.js 并托管在其上的快速、简单且功能强大的博客框架。生态系统中有许多插件主题。您可以基于它快速生成一些静态页面。您可以使用别人的各种主题和插件，也可以自定义开发您想要的功能。为什么不...？其他常用的博客框架还有、、、等，但这些往往需要购买自己的服务器，并且不能静态部署到Pages上。（当然，相应的功能和灵活性也得到了很大的提高。）静态站点的另一个优点是访问速度往往更快。还有静态网站生成器等。但这些大多是为编写文档而定制的。你也可以使用它们，但相比 Hexo 的博客定位，它们用于博客的插件、主题和解决方案要少得多。提供的功能与Hexo几乎相同（生成大量文件时甚至比Hexo更快），但它是基于GO语言的。以后如果你想要定制自己的网站，即使使用Hugo，你仍然需要使用Hugo来编写前端交互，所以基于它选择Hexo可以降低学习成本。（如果你对 GO 感兴趣，你仍然可以尝试使用 Hugo，但本教程不会重点关注 Hugo。）所以对于新手来说，使用 Hexo 作为起点是一个不错的选择。（当然，如果你有钱租服务器的话，可以考虑）

在终端中输入以下命令：

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">npm install hexo-cli -g
# 如果安装失败，可能是没有权限，可以尝试头部加上 sudo 重新执行
# sudo npm install hexo-cli -g</code></pre>
npm 是与 Node.js 一起安装的包管理工具。您可以将其视为 Node.js 附带的应用程序商店。当然是安装啦。 hexo-cli是hexo的终端工具，它可以帮助你生成一些模板文件以供以后使用。 -g 代表全局安装。也就是说在任何地方都可以使用，否则就只能在安装目录下使用。

此时，请先使用cd进入本地计算机上您打算存放网站代码的文件夹目录。（或者右键单击文件夹 Git Bash Here）

例如：

注意：这是您自定义的目录，请勿复制粘贴

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0"># '#' 字符后的文字代表注释，不需要输入
# Windows
cd C:\Users\YunYou\Documents\GitHub\
# macOS
# cd /Users/yunyou/github/</code></pre>
接下来输入：

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">hexo init 你的名字.github.io</code></pre>
hexo 正是因为我们之前安装了hexo-cli软件包，所以我们可以在终端中使用hexo命令。 init 初始化博客的模板文件。接下来是你要创建的文件夹，最好和你之前创建的仓库名称相同。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0"># 进入你的博客文件夹
cd 你的名字.github.io
# 默认安装所有 `package.json` 文件中提到的包
npm install
# 你也可以缩写成 hexo s
hexo server</code></pre>
意思是打开本地Hexo服务器。然后就可以打开浏览器，在地址栏输入：4000就可以看到本地网页了。

按 Ctrl + C 运行终端服务器。

至此，基本的模板页面已经搭建完成。

使用 Hexo 主题

Hexo 默认提供主题。

默认主题风格简单，功能较少。所以大多数人不使用默认主题。

这里我将演示如何使用我自己开发的主题。

星星

_(:з ∠)_对了，求Star，就是收藏的意思。单击链接后，它位于右上角。

你可以去看看示例效果。

Hexo-Theme-Yun 速度检测

--分数.png

-

https://img1.baidu.com/it/u=1904452205,2892685935&fm=253&fmt=JPEG&app=120&f=JPEG?w=889&h=500

当然，你还可以找到更多有趣、漂亮的主题。用法大致相同。

当你具备一定的开发能力后，你可以开发自己的主题，或者添加你想要的功能到hexo-theme-yun提交。

下载 Hexo 主题

进入终端（确保路径在你之前使用Hexo初始化的文件夹目录下，即xxx..io，后面简称Hexo目录），输入以下命令。

事实上，您也可以直接在 VS Code 中使用终端。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">git clone https://github.com/YunYouJun/hexo-theme-yun themes/yun</code></pre>
这里我们使用之前安装的Git。 git clone 表示克隆（即复制的功能）我的主题（托管于，链接为主题的地址），/yun 表示放在你的 Hexo 文件夹中。 /yun 文件夹（如果没有该文件夹，则会自动创建）。

编辑 Hexo 配置

右键该文件夹，使用 VS Code 打开，或者输入 VS Code 打开存放网站的文件夹。所有后续操作都将假设您已经在此工作目录中。

在你通过Hexo初始化生成的文件目录下会有一个.yml文件。

yml是文件的后缀，YAML是“YAML Ain't a”的缩写（YAML不是标记语言），但它实际上是一种标记语言。你可以把它看成是一种存储数据的文本格式，这也是它的用途。如果您听说过 JSON，您就会更好地了解它的用途。

这是Hexo的配置文件。您可以检查每个配置选项的含义。

找到.yml中的theme字段，将其后面的字段修改为yun。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">theme: yun</code></pre>
pug 是一个可以渲染为 HTML 字符串的模板引擎。类似的还有ejs、swig等，语法和设计理念不同。是一个CSS预处理器，可以渲染为CSS。类似的还有scss和less，它们也只是语法和设计理念上有所不同。

由于我的主题使用了pug和Hexo，而Hexo通常附带ejs和pg，因此您可能还需要输入以下命令来安装渲染器。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">npm install hexo-render-pug hexo-renderer-stylus</code></pre>
这时候，像以前一样使用hexo重启服务器，你会看到一个不同主题的页面。

自定义主题配置

启动时，将使用主题的默认配置。但这不一定是您想要的。

所以你可以对主题进行一些定制。

主题的配置文件放置在/yun/.yml 文件中。

等一下，你最好不要直接修改主题的默认配置。如果以后主题升级更新怎么办？我需要再次重新配置吗？

最好的解决方案是在博客根目录（而不是主题目录）中创建一个新的/_data/yun.yml。（如果/_data目录不存在，请创建）

本主题将自定义配置与默认配置合并，因此您只需在 yun.yml 文件中自定义您需要的配置，其余的仍然会自动采用默认配置。

例如，我们需要更改头像。填写yun.yml。

您可以在该文件夹下新建一个文件夹来存放您的图片。您还可以使用上传图像文件来获取在线链接。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">avatar:
url: /images/avatar.jpg # 你的头像图片地址
rounded: true
opacity: 1</code></pre>
更改主题颜色，例如黑色。黑色的十六进制颜色代码是#。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">colors:
primary: "#000000"</code></pre>
然后您的主题颜色将更改为黑色。

这只是一个配置项的简单示例。更多配置可以参考我的或者直接在theme/yun/.yml中查看，根据自己的需求进行配置。

生成静态文件

到目前为止，我们的工作都是在当地进行的。我相信您也想在网上与您的朋友分享。

这就轮到Pages了，但是Pages只支持纯静态文件。

所以我们需要先使用下面的命令来生成站点的静态文件。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0"># 如果进行多次生成，为了避免受错误缓存影响，最好使用 hexo clean 先清除一遍。
hexo generate
# 缩写为 hexo g</code></pre>
这时你的文件夹目录中就会出现这个文件夹，里面包含了你网站的静态文件。

与远程仓库建立关联

接下来，我们将本地仓库与之前在上创建的仓库关联起来。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">git init # 初始化 Git 仓库，只需要执行一次即可</code></pre>
在部署到Pages之前，我们最好先创建一个分支。

什么是分支机构？ Git提供了版本管理功能，包括分支功能，你现在可以简单地将其理解为一个平行世界。

..io 部署后，Pages 将默认使用您的分支作为静态文件部署。

所以我们最好新建一个hexo分支（名字不重要）来存放Hexo源码，该分支用来存放部署的静态文件。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">git checkout -b hexo</code></pre>
此时hexo分支就创建成功了。（后续工作将在hexo分支下进行）

可以使用 git -v 查看当前有哪些分支，并使用 git 分支名称切换到对应的分支。

部署

为了让部署到Pages更加方便，Hexo提供了hexo--git插件。

老规则，安装。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">npm install hexo-deployer-git</code></pre>
在 .yml 中配置。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">deploy:
type: git
repo: 你此前新建的仓库的链接 # 比如：https://github.com/YunYouJun/yunyoujun.github.io
branch: master # 默认使用 master 分支
https://img1.baidu.com/it/u=863473209,471231730&fm=253&fmt=JPEG&app=138&f=JPEG?w=821&h=453

message: Update Hexo Static Content # 你可以自定义此次部署更新的说明</code></pre>
保存并部署！

第一次可能会要求您输入用户名和密码。输入密码时不会有***。别害怕，它已经被输入了。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">hexo deploy</code></pre>
等待后，打开 URL your name..io 查看您的在线网站。

使用https时，http可能无法正常打开。 HTTPS 是带有额外安全加密的 HTTP，浏览器默认会将 http 链接显示为不安全。出于安全考虑，建议启用强制 https 重定向。项目地址页面->页面->页面->HTTPS。（转下图）此时http URL会自动重定向到https

备份和自动部署

我们目前仅将生成的静态文件部署到云端。

为了以防万一，我们也应该将网站的源代码文件推送到仓库进行备份。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0"># 与远程 Git 仓库建立连接，只此一次即可
git remote add origin https://github.com/你的用户名/你的名字.github.io</code></pre>
接下来，准备提交。这几个命令将是您以后每次备份时都需要输入的命令。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0"># 添加到缓存区
git add -A
git commit -m "这次做了什么更改，简单描述下即可"
# 推送至远程仓库
git push
# 第一次提交，你可能需设置一下默认提交分支
# git push --set-upstream origin hexo</code></pre>
你可能会觉得每次push的时候都要输入这三个命令有点麻烦。

然后就可以编写bash脚本了。

例如，在根目录中创建一个新的.sh。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0"># 如果没有消息后缀，默认提交信息为 `:pencil: update content`
info=$1
if ["$info" = ""];
then info=":pencil: update content"
fi
git add -A
git commit -m "$info"
git push origin hexo</code></pre>
如果以后更新的话，只需要在终端中执行 sh .sh 即可。

更新很麻烦，每次部署也很麻烦。您可以使用持续集成来进行自动部署。

什么是持续集成？持续集成是一种软件开发实践。自动化软件构建以捕获错误。 CI是一家在线持续集成服务提供商。它会拉取您每次推送的代码并根据您的要求进行构建。我们可以趁机让它自动为网站生成静态文件，然后自动为我们部署。除此之外，您还可以使用诸如 .与其他人相比，你自己就有了仓库的token，不需要额外的设置，可以直接使用。推荐一款专门用来部署gh-pages的

更具体的自动化部署方案和操作步骤，可以参考我的朋友。

他在文章中详细介绍了、、、CI的部署方法。

也可以参考Hexo的官方文档

我不会在这里添加任何进一步的细节。

至此，你的网站就基本搭建完成了，你可以继续自定义主题了。

开始写文章

输入以下命令创建新的 xxx.md 文件。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">hexo new post xxx</code></pre>
md是md的后缀名，是一种简洁、方便的文本标记语言。你只需要记住一些简单的语法就可以快速编写。为什么要使用？首先，Hexo本身会转换成静态Html文件，方便用户写文章。它就像介于 Word 和 TXT 文本之间的东西。 Word很大，大部分功能都没有被实际使用，最终的文档往往包含很多冗余信息。但TXT无法实现加粗、标题、下划线、水平分割线等常用功能。（这里所说的TXT只是纯文本格式的一个名称，实际上是纯文本文件。不过，通过语法和编译器，我们可以看到一些简单的样式。）

比如这篇文章就写完了。

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0"># 一级标题
## 二级标题
**加粗文字**</code></pre>
更多语法（虽然说是多，但其实不多）：

这是我写的一种风格：

上面是渲染效果，大家可以对比一下。

页

您可以创建一些自己的新自定义页面。

比如直接在Hexo目录下的文件夹中新建一个HTML文件并写入。

您还可以使用以下命令创建新页面。（当然，但你也可以在其中编写 HTML，它也会被渲染。）

代码语言：txt

复制

 <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">hexo new page xxx</code></pre>
说到这里，不得不提一下这个主题的特殊之处。

生成您的妻子列表页面。只要按照一定的格式写就可以了。看。

常见问题解答视频？

没有视频，一来偷懒，二来文字更有利于更新勘误。

并且参考链接会经常出现在文章中，使其更易于使用。

如何绑定您的自定义域名？

首先，您必须拥有自己的域名。

为避免广告嫌疑，您可以自行前往相关域名提供商购买。

并使用 CNAME 解析为您的名字..io。（当然，A记录也可以直接解析为Pages IP地址。）

在Hexo工作目录下的文件夹中新建一个CNAME文件（不带后缀）。

CNAME相当于告诉xxx..io可以服务你的域名。除了会被解析为html的特殊文件外，目录中的其余文件将原样复制到生成的静态文件夹中。所以需要在该文件夹下创建一个CNAME。生成静态文件时，会将CNAME复制到静态文件夹并部署到分支。如果您只是将其设置为（项目地址页面 -> -> -> 页面 -> ），它将自动添加到分支，但没有 CNAME 的部署将覆盖它。

只需填写您的域名作为内容即可。

页: [1]

【华网优展网】's Archiver

小白零成本搭建个人网站教程：从博客到自由实验空间的完整指南