简介

目的

本教程主要介绍在windows系统下如何配置wsl,并在其中配置Node.js环境,使用Hexo框架搭建简单的个人博客，最后使用Markdown进行博客文章的编写并部署到github-pages上。

概念理清

在正式开始之前,我们先简单了解一下我们搭建博客过程中需要使用到的重要概念,以下是比较形象的理解,非准确定义,供参考:

  1. WSL (Windows Subsystem for Linux): WSL让 Windows 用户无需虚拟机或双系统，就能直接在 Windows 中运行原生的 Linux 命令行工具和应用程序。

  2. node.js:JavaScript的服务端运行环境, 让JavaScript跳出浏览器的束缚，在服务器上构建高效、可扩展的应用程序(可以简单理解为给hexo框架的运行提供了必须的环境)。

  3. npm (Node Package Manager):npm 就像是 Node.js 的仓库管理员，负责维护着数以百万计的 JavaScript 库和工具包，使得开发者能够方便地查找、安装并管理这些工具。

  4. Markdown: 一种简洁的文字格式化语法，将纯文本转化为结构清晰、易于阅读的网页内容。

  5. GitHub Pages:允许用户将自己的项目文档或个人网站公开展示出来(其实就是白嫖github的服务器来部署你的网站到互联网,这样别人才能看到)。

  6. Hexo: 快速搭建个人博客或网站的现成框架，它能够高效地将 Markdown 写作的内容转换成静态网页，并轻松部署到 GitHub Pages 或其他服务器上。(别人集成好的专门用来写博客的框架,不需要自己实现网页的从0开始编写,而是从更封装,更抽象的角度来控制你的博客)

环境配置与框架安装

  1. 安装wsl子系统:

    参考:安装Linux子系统（WSL）并连接到vscode - 知乎,后续的操作推荐直接在vscode的终端中完成,便于文件编辑和博客撰写,适合不熟悉Vim等工具的小伙伴

    image-20240822092639258

  2. 安装git:

    1
    2
    sudo apt upgrade
    sudo apt install git

    完成后可以配置ssh-key便于后续hexo主题克隆,网站部署等操作,具体参照:SSH Key生成 - 知乎,完成后测试连通性如下

    image-20240822092802881

  3. 安装Node.js环境

    访问Node.js官网:Node.js完成环境安装,以下是官网参考安装代码,具体请自行在官网复制

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # layouts.download.codeBox.installsNvm
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

    # layouts.download.codeBox.downloadAndInstallNodejsRestartTerminal
    nvm install 20

    # layouts.download.codeBox.verifiesRightNodejsVersion
    node -v # layouts.download.codeBox.shouldPrint

    # layouts.download.codeBox.verifiesRightNpmVersion
    npm -v # layouts.download.codeBox.shouldPrint

  4. 使用npm安装hexo框架:

    1
    npm install -g hexo-cli

  5. 使用hexo生成本地博客站点

    按照如下顺序执行:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # make a new directory
    mkdir myblog
    # change directory
    cd myblog
    # initialize your blog folder
    hexo init
    # clean former generated files
    hexo clean
    # generate your new website
    hexo g
    # run your website locally
    hexo s

  6. 本地访问

    浏览器访问本地的4000端口http://localhost:4000,即可看到一个默认的博客界面

博客的远程部署

  1. 仓库创建

    首先要在github上创建一个跟自己用户名相同的后缀为.github.io的仓库，注意这里必须要与用户名相同。例如我的github名为index-null,则对应的仓库名字为index-null.github.io

    repository

  2. 安装远程部署工具

    1
    npm install hexo-deployer-git --save

  3. 配置插件

    在路径为/myblog/_config.yml的配置文件中填写之前创建的github仓库信息,具体分支名可自行创建与修改

    image-20240822100441706

  4. 完成正式部署

    在完成仓库身份验证后,以下命令会自动将生成的站点上传部署到github-pages中

    1
    hexo d

  5. 查看部署效果

    访问github-pages提供的域名(github账号名.github.io/)即可!

总结

在本基础篇教程中，我们成功地在Windows系统上通过WSL安装了Node.js和Hexo，搭建了一个简单的个人博客，并将其部署到了GitHub Pages。这个过程涵盖了从环境搭建到内容发布的全部基础步骤，为个人博客的优化和维护打下了基础。

接下来的进阶教程将带领大家深入探索博客的个性化和优化。我们将会学习如何撰写和编辑高质量的Markdown文章，美化博客界面，选择和定制Hexo主题，以及利用各种插件来增强博客功能。