搭建个人网站

准备服务器

1、使用GitHub作为网站服务器

  • 使用个人 GitHub 创建仓库，并配置 GitHub Pages

此仓库用于存放个人博客页面，仓库名必须使用 <GitHub用户名>.github.io 格式。

仓库创建完成后，可以在仓库根路径下创建一个名为 index.html 的静态 HTML 文件来验证个人博客搭建是否成功。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Someone's Blog</title>
</head>
<body>
    <h1>Hello, Blog World ~</h1>
</body>
</html>

在 <GitHub用户名>.github.io 仓库对应的 GitHub Pages 设置页面 (访问路径为Settings -> Pages) 可以找到个人博客的主页访问地址：https://<GitHub用户名>.github.io。 若能在浏览器中正常访问该地址，即代表个人 GitHub Pages 搭建成功。

如下：
labuladong
labuladong
学习算法

2、拥有自己的云服务器

小白推荐安装 宝塔面板 降低网站搭建难度。

选择网站类型

  • 建站选择动态网站还是静态网站？（本站为静态网站，以下内容都是已静态网站为基础）

动态网站

         动态网站并不是说网站上有一些动态的图片、flash之类的东西就属于动态网站，一般情况下，动态网站是先从数据库里面获取数据再显示到网站页面上的，网站内容实时更新。与用户交互性强，比如说一些论坛、注册页面、在线聊天页面等都属于动态的。因为每次新加载一个页面，就需要与后台数据库通信，所以对网站空间的要求也相对静态网站高一些，多了一层通信，加载速度也会稍慢一些。动态网站url可能会带有参数。

静态网站

         静态与动态是相对来说的，静态网页就是我们常见的以htm或html结果的页面，当然，也可以根据自己的不同需求，设置不同的文件后缀。每一个静态页面就对应服务器上的一个文件。静态页面不需要与数据库通信，也不会有用户注册、在线聊天等功能，对服务器要求也相对低一些。url相对动态网站来说比较清晰，比如product.htm。

安装所需工具

1、安装 Git 和 NodeJS

Hexo 基于 NodeJS 运行，因此在开始前，需要安装NodeJS 和 npm 工具。安装教程可参考如下步骤。

2、安装 Hexo

  1. 全局安装 hexo-cli 工具

    1
    2
    3
    npm install -g hexo-cli

    hexo -v

  2. 创建一个项目 my-blog 并初始化

    1
    2
    3
    hexo init my-blog
    cd my-blog
    npm install

更换Hexo主题

        官方提供了数百种主题任君选择，可以根据个人喜好更换，具体可以点击(https://hexo.io/themes/)查看。
        本文将主要介绍 Anzhiyu 主题的安装与配置。

  1. 安装 Anzhiyu 主题
            官方提供了三种安装方式，这里使用 npm 方式。

    • git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
    • 下载 最新 release 版本 解压到 themes 目录，并将解压出的文件夹重命名为 anzhiyu。
    • npm i hexo-theme-anzhiyu
      在博客根路径下创建 _config.anzhiyu.yml 文件，并将主题的 hexo-theme-anzhiyu/_config.yml 文件内容复制过去。

  2. 指定主题

    将如下修改应用到 Hexo 博客目录中的 _config.yml:

    1
    theme: anzhiyu

  3. 安装 pug 和 stylus 渲染插件

    1
    2
    npm install hexo-renderer-pug hexo-renderer-stylus --save
    npm install hexo-renderer-pug hexo-renderer-stylus --save --registry=http://registry.npmmirror.com

  4. 生成网页文件&本地启动

    hexo clean=>hexo cl :清理生成的页面文件。
    hexo generate=>hexo g :生成的页面文件在项目 public 目录下。
    hexo server=>hexo s : 启动项目
    hexo deploy=>hexo d : 部署项目

    hexo cl && hexo g && hexo s “一键三连”

  5. 本地访问
    浏览器访问：http://localhost:4000/ 会看到一个比较简陋的页面。没关系，接下来介绍如何更换主题。

  6. 更多配置