小白零成本搭建个人网站教程：从博客到自由实验空间的完整指南,刷钻网站推广低价
栏目：网络推广 发布时间：2024-12-29
写给新手和我以前的自己，他们想要拥有自己的网站但没有资金成本。 前言 虽然是网站，但对于个人来说，一般可以称为博客。 但我不希望它只是一个博客， ... 小白零成本搭建个人网站教程：从博客到自由实验空间的完整指南
写给新手和我以前的自己，他们想要拥有自己的网站但没有资金成本。
前言
虽然是网站，但对于个人来说，一般可以称为博客。
但我不希望它只是一个博客，而是一个脱离我自己的现实生活的地方，在那里我可以自由、实验、不怕别人的眼光，甚至可以随心所欲。
当然，这本质上是一个新手教程，可能感觉有点科普的感觉。
我会整体介绍一下网站建设的过程以及所使用的技术和步骤（因为我想展开，如果轶事太多，太复杂了，我就停止了），让你了解这个东西它在网站的发展中起到什么作用？
但我不会详细介绍，例如如何注册帐户以及安装过程中如何单击“下一步”。
希望之前对此毫无了解的新手读完这篇文章后，能够建立一个属于自己的网站。 （前提是会基本英语单词并善用搜索引擎）
已经有基本了解的同学可以跳过阅读或者直接关闭。
大部分评论都是相关的补充说明，对正常流程没有影响。如果你不感兴趣，你可以跳过它。
任何与文章相关的问题都可以在本文中评论，其他问题可以在相应的项目或文章下评论。
我会尽力保持本文中使用的技术和实践的更新，并随时接受更正。
安装 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
复制
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <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></p>
npm 是与 Node.js 一起安装的包管理工具。您可以将其视为 Node.js 附带的应用程序商店。当然是安装啦。 hexo-cli是hexo的终端工具，它可以帮助你生成一些模板文件以供以后使用。 -g 代表全局安装。也就是说在任何地方都可以使用，否则就只能在安装目录下使用。
此时，请先使用cd进入本地计算机上您打算存放网站代码的文件夹目录。 （或者右键单击文件夹 Git Bash Here）
例如：
注意：这是您自定义的目录，请勿复制粘贴
代码语言：txt
复制
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <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></p>
接下来输入：
代码语言：txt
复制
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">hexo init 你的名字.github.io</code></pre></p>
hexo 正是因为我们之前安装了hexo-cli软件包，所以我们可以在终端中使用hexo命令。 init 初始化博客的模板文件。接下来是你要创建的文件夹，最好和你之前创建的仓库名称相同。
代码语言：txt
复制
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <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></p>
意思是打开本地Hexo服务器。然后就可以打开浏览器，在地址栏输入：4000就可以看到本地网页了。
按 Ctrl + C 运行终端服务器。
至此，基本的模板页面已经搭建完成。
使用 Hexo 主题
Hexo 默认提供主题。
默认主题风格简单，功能较少。所以大多数人不使用默认主题。
这里我将演示如何使用我自己开发的主题。
星星
_(:з ∠)_对了，求Star，就是收藏的意思。单击链接后，它位于右上角。
你可以去看看示例效果。
Hexo-Theme-Yun 速度检测
--分数.png
-
前言
虽然是网站，但对于个人来说，一般可以称为博客。
但我不希望它只是一个博客，而是一个脱离我自己的现实生活的地方，在那里我可以自由、实验、不怕别人的眼光，甚至可以随心所欲。
当然，这本质上是一个新手教程，可能感觉有点科普的感觉。
我会整体介绍一下网站建设的过程以及所使用的技术和步骤（因为我想展开，如果轶事太多，太复杂了，我就停止了），让你了解这个东西它在网站的发展中起到什么作用？
但我不会详细介绍，例如如何注册帐户以及安装过程中如何单击“下一步”。
希望之前对此毫无了解的新手读完这篇文章后，能够建立一个属于自己的网站。 （前提是会基本英语单词并善用搜索引擎）
已经有基本了解的同学可以跳过阅读或者直接关闭。
大部分评论都是相关的补充说明，对正常流程没有影响。如果你不感兴趣，你可以跳过它。
任何与文章相关的问题都可以在本文中评论，其他问题可以在相应的项目或文章下评论。
我会尽力保持本文中使用的技术和实践的更新，并随时接受更正。
安装 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
复制
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <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></p>
npm 是与 Node.js 一起安装的包管理工具。您可以将其视为 Node.js 附带的应用程序商店。当然是安装啦。 hexo-cli是hexo的终端工具，它可以帮助你生成一些模板文件以供以后使用。 -g 代表全局安装。也就是说在任何地方都可以使用，否则就只能在安装目录下使用。
此时，请先使用cd进入本地计算机上您打算存放网站代码的文件夹目录。 （或者右键单击文件夹 Git Bash Here）
例如：
注意：这是您自定义的目录，请勿复制粘贴
代码语言：txt
复制
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <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></p>
接下来输入：
代码语言：txt
复制
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre class="prism-token token line-numbers language-txt"><code class="language-txt" style="margin-left:0">hexo init 你的名字.github.io</code></pre></p>
hexo 正是因为我们之前安装了hexo-cli软件包，所以我们可以在终端中使用hexo命令。 init 初始化博客的模板文件。接下来是你要创建的文件夹，最好和你之前创建的仓库名称相同。
代码语言：txt
复制
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <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></p>
意思是打开本地Hexo服务器。然后就可以打开浏览器，在地址栏输入：4000就可以看到本地网页了。
按 Ctrl + C 运行终端服务器。
至此，基本的模板页面已经搭建完成。
使用 Hexo 主题
Hexo 默认提供主题。
默认主题风格简单，功能较少。所以大多数人不使用默认主题。
这里我将演示如何使用我自己开发的主题。
星星
_(:з ∠)_对了，求Star，就是收藏的意思。单击链接后，它位于右上角。
你可以去看看示例效果。
Hexo-Theme-Yun 速度检测
--分数.png
-