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

发布日期： 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

复制

 <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

-

# 小白零成本搭建个人网站教程 # 慈溪网站推广价格便宜 # 上海网站站内优化 # 最新网站建设方案 # seo实战指南 pdf下载 # 网站seo的内容 # 南通短视频seo推广 # 株洲抖音付费营销推广策划方案 # 泗水市场seo报价多少 # 装饰网站建设公司 # 婚恋网网站推广 # 专业集团网站建设 # 从博客到自由实验空间的完整指南 # 高邑网站建设营销公司招聘 # 优化网站关键词选择软件 # 百度营销怎么关闭推广 # 实力强的白帽seo # 齐家推广营销环节 # 日照短视频seo推广 # seo管理员招聘 # 企业seo网站管理系统 # seo爱占工具

上一篇: 自己写的文章被别人申请了百度原创怎么办？,驾校营销推广方法

下一篇: 自己做了个发外链的网站，大家看看，有什么改进的地方,李秉宪电

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

随便看看

四川天上人间科技有限公司