从零开始构建自己的网站 (2) <托管静态网站>

以下内容为未购买服务器搭建静态网站,演示为较为流行的 Hexo 工具,托管平台为 Netlify,其它平台也是大同小异。

设置 Hexo 环境

准备环境

如果已经安装了 node.js 和 git,请跳转到第 2 步。

i. 安装 node.js

a. Windows

可以通过 Winget(在 Windows 10 1709 后自带)安装:

使用 Win+X,打开 Windows 终端 (管理员) ,在打开的 Powershell 中输入:

# 最新版本
winget install OpenJS.NodeJS
# 长期支持版本
winget install OpenJS.NodeJS.LTS

或者通过下载安装包的方式安装:

https://nodejs.org/en/download

b. MacOS

若要使用安装包:

https://nodejs.org/en/download

若用命令行自构建安装:

curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/  sed -nE 's.\*>node-(.\*)\\.pkg.\*\\1p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"

若使用 Brew 包管理器:

brew install node

c. Linux

请使用你所对应的发行版的包管理器进行安装。

请参阅 使用包管理器安装 Nodejs

d. Android

Android 无法直接使用命令行,请先安装 Termux 软件。

Fdroid 上的 Termux 地址

然后在 Termux 中输入:

pkg install nodejs

ii. 安装 Git

a. 自行下载安装包

官网地址:https://git-scm.com/download

Windows 版本国内镜像:https://registry.npmmirror.com/binary.html?path=git-for-windows/

b. 包管理器

为了减小文章篇幅,我将所有命令放在一起:

# Windows
winget install Git.Git
# Mac OS
brew install git
# Ubuntu
sudo apt-get install git
# CentOS
sudo yum install git
# Android
pkg install git

安装 Hexo

请在命令行中输入:

npm install -g hexo-cli

耐心等待完成。

新建项目

安装完成 Hexo 后,执行以下命令来新建一个项目:

# <folder> 为文件名
hexo init <folder>
cd  <folder>
npm install

新建完成后,指定文件夹的目录应为下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
   ├── _drafts
   └── _posts
└── themes

其中,_config.yml 为配置文件,package.json 是应用程序信息,scaffolds 是模板文件,source 下是您的页面文件,themes 是主题文件。

创作文章

在命令行中输入

hexo new [layout] <title>

[layout] 留空时默认使用 _config.yml 中的default_layout 参数。

文章请使用 Markdown 语言创作。

使用如下命令启用预览:

hexo server
# 或者
hexo s

默认端口为 4000,你可以在浏览器中打开 localhost:4000 来查看实时页面。

使用如下命令在 Public 文件夹中生成静态文件:

hexo generate
# 或者
hexo g

将静态文件托管到 Netlify

正如开头所说的,我在这里演示 Netlify,其他平台也大同小异

1. 注册 Netlify 账户

打开 Netlify 官网 ,选择 Sign Up,可以通过 Email,GitHub 等进行注册。

2. 连接 Git 仓库

目前 Netlify 支持 GitHub,Gitlab,Bitbucket,Azure DevOps 仓库,我这里用较为流行的 GitHub 做个演示。

打开 GitHub 官网 ,登录账户后点击加号,选择 New repository,随便起个名字,公开性可以自行选择。

这时我们回到开发环境,在 hexo 网站根目录执行

npm install hexo-deployer-git

然后编辑 _config.yml 文件,添加以下配置(如果配置已经存在,请将其替换为如下):

deploy:
  type: git
  repo: https://github.com//

然后在根目录执行:

hexo clean && hexo d

这时请查看您的 GitHub 仓库,如果代码被成功推送那么证明配置成功了。

Tips: 如果上述代码报错为验证错误,请查看文末寻求解决方案。

3. 在 Netlify 上部署

打开 https://app.netlify.com/ ,找到 Sites,选择 Add new site,Import an existing project。

第一步是授权仓库,根据您的仓库选择托管方,然后会弹出一个新页面,要求您授权访问仓库。

第二步是选择仓库,请选择您刚刚创建并推送了 hexo 代码的仓库。

第三步是网站配置,可以设置构建代码,仓库分支,网站目录,环境变量等。

(如图所示,hexo 默认是不需要设置构建代码的,默认留空即可)

最后选择 Deploy,Netlify CDN 就开始部署你的网站啦!

4. 绑定自己的域名

tips: 这一步并不是必须的

附录

1. GitHub 账户验证问题

现在 Github 要求使用密钥来提高账户安全性,密钥生成的方法如下:

在 Github 中打开 Settings

然后选择 Developer Settings

选择 Personal access tokens 下的 Fine-grained tokens,然后新建一个 token

根据你需要的条件填写相关配置

然后生成并复制您的 Token,再次在 hexo 根目录执行:

hexo clean && hexo d

并在 password 请求栏中输入自己的 token,就成功上传了。


请务必记下您的 Token,否则它不会第二次在那个页面上显示!

上一篇
下一篇