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

写给想要具有一个自己的 网站但没有资金本钱的小白与已经的自己。

前言

虽说是网站，对于小我来说，也许一般叫作博客。 但我不希望它仅仅是一个博客，而是可以成为一个处于自己现实 生活之外、自在、尝试、不用害怕他人眼光甚至可以刚愎自用的地方。

固然，这本质还是一个新手向教程，也许会有点科普的感受。 我会从整体上对搭建网站的流程和利用到的技术及步调停止先容（由于要铺开讲，倘使包括轶事，实在太多太杂，我也会点到为止），并让你大白这个工具在网站的进程中起到什么样的感化。 但我不会就细枝小节展开论述，比方若何注册账号、安装时若何点击下一步。 我希望看完此篇文章后，此前对此方面 常识一无所知的小白，到最初也能搭建出一个属于自己的站点。（条件是熟悉根本的英语单词和善用搜索引擎）

已经有所根本的同学大可跳读大概间接封闭。

正文处多为相关补充说明，对一般流程没有影响，若没有爱好，可以略过。

与文章相关疑问都可在本文章的 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 诞生。 2022 年，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: http://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 是随 Node.js 一路被安装的包治理工具，你可以了解成 Node.js 自带的利用商铺。 install 自然是安装。 hexo-cli 则是 hexo 的终端工具，可以帮助你天生一些模版文件，以后再用到。 -g 代表的是全局安装。也就是在任何地方都可以利用，否则会只能在安装的目录下利用。

此时，请先经过 cd 进入你当地电脑筹算存储网站代码的文件夹目录。（大概右键文件夹 Git Bash Here）

cd | DOS 号令
cd （LINUXSHELL 号令）

比方：

留意：这里是你自界说的目录，请不要复制粘贴

接下来输入：

hexo 正是由于我们之前安装了 hexo-cli 这一个包，所以我们可以在终端中利用 hexo 这一号令。 init 初始化博客的模版文件。前面跟的是你要新建的文件夹，最好和你此前新建的仓库名分歧。

server 代表开启当地的 Hexo 办事器，这时你便可以翻开阅读器，在地址栏中输入 localhost:4000 便可以看到当地的网页了。

按 Ctrl + C 终端办事器的运转。

至此，根本的模版页面便已经搭建好了。

利用 Hexo 主题

Hexo 默许供给的是 hexo-theme-landscape 主题。 默许主题款式简单，功用较少。所以大大都人并不会利用默许主题。

这里将树模若何利用我自己开辟的主题 hexo-theme-yun（_(:з」∠)_ 顺带求 Star）。 你可之前往 云游君的小站 检察示例结果。

固然，你也可以在 Themes | Hexo 发现更多风趣美丽的主题。利用方式大致不异。 当你具有一定开辟才能时，你可以开辟属于自己的主题，大概为 hexo-theme-yun 提交 PR 增加你想要的功用。

• hexo-theme-yun - GitHub
• hexo-theme-yun 利用文档：更具体的设置进阶指南。
• 示例结果

下载 Hexo 主题

进入终端（确保途径处于你此前利用 Hexo 初始化好的文件夹目录下，后简称为 Hexo 目录），输入以下号令。

现实上你也可以间接在 VS Code 中利用终端。

这里便利用到了我们此前安装的 Git，git clone 即代表克隆（也就是复制的感化）我的主题（托管于 GitHub，链接即是主题地点的地址），themes/yun 则代表放在你 Hexo 文件夹下的 themes/yun 文件夹里（没有该文件夹会自动新建）。

编辑 Hexo 设置

右键文件夹利用 VS Code 翻开，大概进入 VS Code 翻开你存储网站的文件夹。尔后操纵都将默许你已处于该工作目录下。

在你此前经过 Hexo 初始化天生的文件目录下，会存在一个 _config.yml 文件。

yml 是 YAML 文件的后缀名，YAML 是 "YAML Ain't a Markup Language"（YAML 不是一种标志说话） 的缩写，但它现实上还是一种标志说话。你可以将其了解为存储 数据的一种文本格式，这也是其诞生的目标。 假如你听说过 JSON，那你就更能大白它是干什么的了。

它是 Hexo 的设置文件，关于各设置选项的意义你可以检察 设置 | Hexo。

在 _config.yml 中找到 theme 这个字段，将厥后的 landscape 点窜成 yun。

pug 是一种模板引擎，可以衬着为 HTML 字符串。类似的还有 ejs，swig 等，语法和设想理念有所分歧。 stylus 是一种 CSS 预处置器，可以衬着为 CSS。类似的还有 scss，less，一样只是语法和设想理念有所差别。

由于我的主题利用了 pug 和 stylus，而 Hexo 自带的通常为 ejs 与 stylus，所以你能够还需要输入以下号令安装衬着器。

这时再像此前那般利用 hexo server 重新启动办事器，你便可以看到一个纷歧样的主题气概的页面了。

自界说主题设置

当启动时，会利用主题的默许设置。但这纷歧定是你想要的。 所以你可以对主题停止一些自界说。

主题的设置文件放在 themes/yun/_config.yml 文件中。 且慢，你最好不要间接点窜主题的默许设置。倘使往后主题升级更新了怎样办吗，难道还要重新设置一遍吗？

最好的处理 计划就是新建 source/_data/yun.yml。（若 source/_data 目录不存在，请新建）

本主题将自界说设置与默许设置停止合并，是以你只需要在 yun.yml 文件中自界说你需要的设置即可，其他仍将自动采用默许设置。

比方我们需要更换头像。在 yun.yml 中填写。

你可以在 source 文件夹下新建 images 文件夹，用来存储你的图片。 也可以利用 SM.MS 上传你的图片文件，获得在线链接。

更换主题色彩，比如换成黑色，黑色的十六进制色彩代码是 #000000。

这时你的主题色彩就会变成黑色。

这只是一个设置项的简单示例，更多设置你可以参考我的主题文档或间接在 theme/yun/_config.yml 中检察，并按照自己的需要停止设置。

天生静态文件

至今我们的工作都是在当地停止，想必你也很想放到线上与小伙伴们分享。 这便轮到了 GitHub Pages 的进场，不外 GitHub Pages 只支持纯静态文件。

所以我们需要利用以下号令先来天生站点的静态文件。

此时你的文件夹目录下会出现 public 这个文件夹，里面寄存的就是你站点的静态文件。

与远程仓库建立关联

接下来我们将当地的仓库与此前在 GitHub 上建立的仓库建立关联。

在将其摆设到 GitHub Pages 上之前，我们最好先建立一个分支。

什么是分支？ Git 供给了版本治理功用，其中还有一个分支功用，你现在可以简单地将其了解为平行天下。

你的名字.github.io 摆设后，GitHub Pages 将默许利用你的 master 分支作为静态文件摆设。 所以我们最好新建一个 hexo 分支（命名无所谓）用来存储 Hexo 地源代码，master 分支则用来存储摆设后的静态文件。

这时便成功建立了一个 hexo 分支。（尔后的工作都将在 hexo 分支下停止）

你可以经过 git branch -v 来检察当前有哪些分支，利用 git branch 分支名 来切换到对应的分支。

Git 进修笔记

摆设

为了更方便的摆设到 GitHub Pages，Hexo 供给了 hexo-deployer-git 插件。

老例子，安装。

在 _config.yml 中设置。

保存，摆设！

第一次能够需要你输入用户名与密码。 密码输入的时辰不会出现 ***，不要惧怕，已经输入进去了。

期待完成后，翻开网址 https://你的名字.github.io 就能看到你的线上网站了。

利用 https，http 能够没法一般翻开。HTTPS 是多了平安加密的 HTTP，Chrome 阅读器已经默许会显现 http 链接为不服安。 为了平安，倡议开启强迫 https 跳转。项目地址页面 -> Settings -> Options -> GitHub Pages -> Enforce HTTPS。（翻到下面） 此时，http 网址会自动重定向到 https

备份与自动摆设

我们当前只是将天生的静态文件摆设到了云端。

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

接下来预备提交，这几句号令将是你今后每次备份所需要输入。

每次推送都要输入这三条号令，你能够感觉有些麻烦。 那末你可以编写 bash 剧本。

比方，在根目录下新建 update.sh。

尔后更新的话，只需要在终端履行 sh update.sh 即可。

更新麻烦，每次摆设也很麻烦，可以利用延续集成停止自动摆设。

什么是延续集成？ 延续集成是一种 软件开辟理论。对软件停止自动化构建，以此来发现毛病。 Travis CI 就是一个线上延续集成办事的供给商。它可以拉取你每次推送到 GitHub 上的代码，然后按照你的要求对其停止构建。 我们可以乘隙让它自动天生网站静态文件，然后自动帮我们摆设。

至于若何利用延续集成来摆设 Hexo，官方文档已经先容的很具体，所以我就不再画蛇添足了。

将 Hexo 摆设到 GitHub Pages

至此，你的站点便根基搭建完成，尔后继续对主题停止自界说吧。

Yun 主题文档

起头写作

文章

输入以下号令即可新建 xxx.md 文件。

md 是 Markdown 的后缀名，是一种简洁方便的文本标志说话。你只需要记着简单的几种语法，便可以快速停止编写。 为什么利用 Markdown？ 首先 Hexo 自己就是将 Markdown 转化为静态的 Html 文件，来方便用户编写文章。 Markdown 就恰似介于 Word 与 TXT 文本之间。Word 体积大、大部分功用现实上底子用不到，且最初的文档经常带有很多冗余信息。 而 TXT 却没法实现加粗、 题目、下划线、水平朋分线等常用的功用。 （这里所说的 TXT 只是一种纯文本格式的代称，现实上 Markdown 也是纯文本文件，不外经过语法和 Markdown 编译器，我们便可以看到一些简单的款式。）

比方本文就是经过 Markdown 编写。

更多语法（虽然说是更多，可是实在也没几多）：Markdown 根基语法

这是我写的一个 Markdown 款式：star-markdown-css

上面是衬着事后的结果，你可以与其 Markdown 的纯文本原文停止对照。

页面

你可以新建一些自己的自界说页面。

比方间接在 Hexo 目录下的 source 文件夹下间接新建 HTML 停止编写。

也可以经过以下号令来新建页面。（固然还是 Markdown，不外也是可以在 Markdown 里写 HTML 的，也会被衬着出来。）

说到这里，就不能不提一提本主题的特点功用了。

天生你的妻子列表页面。按一定格式誊写即可。见文档。

FAQ

视频？

没有视频，一是懒，二是笔墨更利于更新勘误。

以及文章中将会频仍出现参考链接，更方便利用。

若何绑定你的自界说域名？

首先，你得有个自己的域名。

避免广告怀疑，你可以自行前往相关域名供给商采办。

并利用 CNAME 剖析到 你的名字.github.io。（固然 A 记录间接剖析到 GitHub Pages IP 地址也可以。）

Managing a custom domain for your GitHub Pages site

在 Hexo 工作目录下 source 文件夹下新建 CNAME 文件（没有后缀名）。

source 目录下的文件除了特别的 markdown 会被剖析为 html，其他城市原样复制到天生的静态文件夹中。

内容填写你的域名即可。

About custom domains and GitHub Pages

更多能够有帮助的内容

• 让百度收录你的 GitHub Pages 博客 - 云游君的小站
• 利用 CDN 加速你的 GitHub Pages 网站 - 云游君的小站

结语

小我网站一样可以用来做很多工作，你可以将其用来记录生活、回忆、创作、进修笔记、开辟经历等（包括作为一个实验平台）。 可以与熟悉的人分享，也可以作为另一个天下另一个自己的展现。

多年后，回看起自己当初写下的内容，未尝不是件风趣的工作。

善始者众，善终者寡。

臣闻善作者，不必善成；善始者，不必善终。「史记·乐毅列传」

希望大师能有毅力对峙下去，不忘初心。

永久相信美好的工作行将发生

假如还有其他小题目，可以到 QQ 群（389401003）里反应。

假如是更通用的题目，最幸亏批评中停止反应，这样此外同学也能看到，不需要反复提问。

https://qm.qq.com/cgi-bin/qm/qr?k=qcnwI3zh314nCMgXyH2gPVwptz4lspch&authKey=JD+Xq386ByvfvriVq4MyXNc5UPCX0hgalHQfuimF65rFNSTGpjuWKP7GjhJvsbHo (二维码自动识别)

Q.E.D.