教你如何从零开始搭建一个属于自己的网站

时间:2021-10-28 来源:未知网络 作者:996建站网

写给想要拥有一个自己的网站但没有资金成本的小白与曾经的自己。

前言

虽说是网站,对于个人来说,或许一般叫作博客。 但我不希望它仅仅是一个博客,而是能够成为一个处于自己现实生活之外、自由、实验、不用畏惧他人眼光甚至可以独断专行的地方。

当然,这本质还是一个新手向教程,也许会有点科普的感觉。 我会从整体上对搭建网站的流程和使用到的技术及步骤进行介绍(因为要铺开讲,倘若包括轶事,实在太多太杂,我也会点到为止),并让你明白这个东西在网站的过程中起到什么样的作用。 但我不会就细枝末节展开叙述,譬如如何注册账号、安装时如何点击下一步。 我希望看完此篇文章后,此前对此方面知识一无所知的小白,到最后也能搭建出一个属于自己的站点。(前提是认识基础的英语单词和善用搜索引擎)

已经有所基础的同学大可跳读或者直接关闭。

注释处多为相关补充说明,对正常流程没有影响,若没有兴趣,可以略过。

与文章相关疑问都可在本文章的 GitHub Issues 中进行评论,其他疑问可到对应项目或文章下评论。

我会尽可能保持更新该文章所使用到的技术和做法,并随时接受勘误。

关键词

  • Hexo
  • 静态博客
  • 无服务器
  • GitHub Pages
  • hexo-theme-yun(私货)

步骤

安装 Node.js

什么是 Node.js ?
这得从什么是 JS 说起,JS 也就是 JavaScript。(为什么有种从盘古开天辟地开始的感觉)没错,JavaScript 就是网页的盘古。JavaScript 是一种编程语言,我们所见到的网页中的交互和逻辑处理几乎都是由 JavaScript 完成。
JavaScript 语法简单,易学易用。(当然也请不要小瞧它,虽然它入门门槛低,但上限同样也很高。包括但不限于实现网站前后端,手机桌面应用程序,机器学习,计算机图形学等。) 在 Node.js 诞生前,JavaScript 都运行于浏览器端。也就是说,它是鱼,浏览器是装满了水的水缸。 2008 年,Chrome V8 诞生。2009 年,Node.js 诞生。并成为 GitHub 早期最著名的开源项目。GitHub 可能大家已有所了解,后续再说。
Node.js 便是一个基于 Chrome V8 引擎的 JavaScript 运行环境。(当年第一次看到这句话时,我也一脸懵逼。)按照我的理解,JavaScript 是鱼,Chrome V8 就是抽水机,Node.js 则把这台抽水机也装在你电脑上。于是你的电脑也有了 Node.js 这个和浏览器相似的水缸,也可以在里面运行 JavaScript 了!
当然 Node.js 和浏览器端还是因为自身定位和一些历史原因而有些许区别的,不再展开。
Node.js | 百度百科
JavaScript | MDN

下载| Node.js

建议下载长期支持版而非当前发布版(因为如果是最新版,容易出现一些奇妙的 bug)。

全部默认下一步进行安装。

Windows 打开命令提示符,macOS 打开终端。(= =,这个不会就请百度吧。) Linux 用户右上角关闭本标签页。

后续如提到输入命令,均默认指打开终端进行输入。

输入 node --version,如果得到的版本号与你方才安装的一致,那么 Node.js 就已经成功安装。

Git 与 GitHub

安装 Git

Visual Studio Code,简称 VS Code。 目前最为强大的编辑器,轻量且快速。(~~宇宙第一编辑器~~) 注意:它并不是我们常常听到的 VS,VS 常常指的是 Visual Studio,是一个功能强大的 IDE(集成开发环境),体积也相比 VS Code 都要大上一个量级。

在此之前,我建议你先安装 VS Code。因为安装 Git Bash 时,可以设置 VS Code 作为默认编辑器。

Git 是一个开源的分布式版本控制系统,由 Linus Torvalds(同时也是 Linux 的作者)为了管理 Linux 开发而开发。 简而言之,是一个版本管理工具。譬如设计师设计好了第三版的海报,客户却说还是要第一版吧,这时便可以通过 Git 快速回退到最初的版本。 你只需要把每次更改的状态(Git 会自动进行检测,你只要掌握基础的几条命令就可以了)告诉 Git,而不需要每个版本都保存一份压缩包,既方便也能大大节约空间。 (当然这主要只对代码文本起作用,因为 Git 的本质是记录各行代码的增减,倘若是像视频、海报这类二进制文件来说便体现不出丝毫优势了。当然想要应对这种场景还有 Git LFS。)

下载 Git 并安装(如果国内速度太慢,可以试试这里)

macOS 用户可以下载官网的安装包进行安装,也可以直接安装 App Store 的 Xcode(附带会安装 Git,但是比较大)。

类似的工具还有:SVN。但始终更推荐 Git,因为它功能更为强大且它的背后还有更强大的生态:GitHub。

注册 GitHub

GitHub 一听便与 Git 有所渊源。Git 在英文中是懒人、饭桶之意。Hub 则是中心、集线器的意思。譬如 USB 集线器就是 USB Hub。所以 GitHub 就是饭桶中心(~~大雾~~)。
GitHub 是全世界最大的开源项目与代码托管平台,也是众多开发者的交流场所。~~还是全球最大的同性交友网站~~。 而代码托管本身用到的正是上文提到的 Git 技术。

注册 GitHub 账号。(虽然都是英文,但不必畏惧,也并不会造成使用障碍,只要记得最常用的选项含义即可,以及善用手头的翻译软件。)

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

登录 GitHub。

为什么要用 GitHub? 对于平民玩家来说,在初次尝试建立自己的网站时,也许并不会有闲钱或者说决心来购买自己的服务器与域名。 而 GitHub 则提供了 GitHub Pages 这一服务。 用户们可以利用这一服务,部署自己的静态站点。

点击右上角的 + -> New repository 新建仓库。

教你如何从零开始搭建一个属于自己的网站插图

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

仓库名称务必为 你的用户名.github.io,用户名是英文,大小写无所谓,但建议统一小写。(因为你会发现时常切换大小写很麻烦)

为什么必须这个作为仓库名? GitHub Pages 服务的命名规范,同时它也将成为你的专属域名。当然,你也可以购置自己的专属域名并用它来提供内容。

点击 Create repository

安装 Hexo

Hexo

  • GitHub: github.com/hexojs/hexo
  • 官方文档(直接参考文档也是一个不错的选择)

为嘛使用 Hexo ? Hexo 是一个快速、简洁而强大的博客框架,基于 Node.js,同样托管于 GitHub 之上。生态中拥有众多插件主题。你可以基于它快速生成一些静态页面。 你可以使用别人的各种主题与插件,也可以自己定制开发想要的功能。 为什么不是…? 其他常用的博客框架还有 WordPress,Typecho等,但这些往往都需要购置自己的服务器,而无法静态化地部署到 GitHub Pages 上。(当然,相应的功能和灵活性也大大提升。) 静态网站生成器还有 Vuepress,Gatsby等。但这些多是为了写文档而量身定制的,你也可以使用它们,但是相较 Hexo 的博客定位,它们关于博客的插件和主题以及解决办法会少得多。 Hugo 提供的功能与 Hexo 几乎相同,不过它是基于 GO 语言。日后你想对自己的网站进行自定义,即便是 Hugo,你编写前端的交互仍旧需要使用 JavaScrip,所以选择基于 JavaScript 的 Hexo 可以降低学习成本。(你若对 GO 有兴趣,仍然可以尝试使用 Hugo,但本教程将不会针对 Hugo 进行展开。) 所以对于新手来说,使用 Hexo 作为起始点,不失为一个好选择。(当然如果你有钱租服务器,就可以考虑考虑 WordPress)

在终端中输入以下命令:

npm install hexo-cli -g
# 如果安装失败,可能是没有权限,可以尝试头部加上 sudo 重新执行
# sudo npm install hexo-cli -g

教你如何从零开始搭建一个属于自己的网站插图1

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序