1.简介

曾经有位老师说过：“希望我们不要沦落到用简历找工作”，对于程序员来说个人博客当然是最好展示自己的能力的平台。（某圈装13专用）

本次需要使用的软件及网站（点击即可下载）：

  • VPN（为了网站的持久运行，不敢放链接）

    Tips：如果出现timeout , 下载速度慢都可以使用VPN

  • Git

  • Node

  • Github（请确保你有VPN）

  • Typora（用于博客的编写，建议安装完后主动学习Markdown语法）

2.使用Hexo在本地搭建简单的网站

  1. 安装Node和Git

    • 打开下载的Node安装包，不需要修改任何东西，都选择“下一步”进行安装。

    • 打开下载的Git安装包，不需要修改任何东西，都选择“下一步”进行安装。

      • 刚刚测试了一下好像不需要加入环境变量

      • 找到Git的安装文件夹，找到里面的bin文件夹，复制两个地址

        img

        img

      • 使用 Win + Q 打开搜索，输入：环境变量。

        image-20220219162108635

      • image-202202191620342

      • image-20220219162333412

        在这里面添加刚刚复制的地址

        image-20220219163016488

  2. 以管理员身份打开cmd

    • 使用 Win + Q 打开搜索，输入cmd。

      742a7bc84b3b86a6c33865beed7c504

    • 选择cmd图标，右键选择以管理员身份打开

    4231effa2b763ed832da321ebe59c21

  3. 使用cmd检查是否成功安装Node

  • 在cmd中输入以下命令

    1
    node -v
    1
    npm -v

  • cmd如果和图片中的一样则安装成功

9726bfe0fdf9e5517e9256074a417f0

  1. 使用cmd安装cnpm

    • 在cmd中输入以下命令

      1
      npm install -g cnpm --registry=https://registry.npm.taobao.org

    • 使用以下命令检查是否安装成功

      1
      cnpm -v

  • 若和下面图片一样即安装成功

    b6b21b30a10f947ce9b3879ae16c84e

  1. 使用cmd安装Hexo模块

    • cmd中输入以下命令：

      1
      cnpm install -g hexo-cli

    • 同样的我们使用以下命令检查是否安装成功

      1
      hexo -v

    • 若和下面图片一样即安装成功

      cf49f15a84024eb1ebb88c820e1cfba

  2. 创建一个用于网站的文件夹

    • 在电脑里新建名为blog的文件夹（名字无所谓），并复制改文件夹地址。

      4c0e9dc5889a218e2debffbaeebcf72

      进入blog文件夹，复制文件夹的地址

      06a70e46b649dab250c3df8d02dcba0

    • 在cmd中进入该文件夹
      cmd输入以下命令

      1
      blog文件夹所在的盘符，比如我都在E盘，就输入 E:
      1
      cd + 复制的地址

      下图则成功进入了blog文件夹

      9216f0fcc20c82b8eb8dba5001af495

  3. 生成博客

    • 初始化hexo

      在cmd输入

      1
      hexo init

      结果如图：

      8b72cba13de8c8d4f38eb28d5734956

    • 同时你的blog文件夹里也会生成许多文件

2f14b803d274b726d7a03751253a7f9

  1. 启动博客

    • 在命令行输入

      1
      hexo s

    • 出现以下命令时，你的博客已经生成，cmd命令告诉我们可以在 http://localhost:4000/ 中查看我们的博客

f1b92fb2d5597c4e45c2ddcfb6c9ca3

​

  1. 查看博客

6b9270dbac5e71bbeab2ac4586e8d10

​ 完结撒花！！！

3.将网站部署到Github

  1. 断开刚刚运行的博客

    • 在cmd里按 Ctrl+C，再输入Y确认，即可使博客停止运行（Win11不需要输入Y确认）

      75d7db09c763177877f806d9f3159eb

  2. 打开Github,创建仓库

    • image-20220219135052463

    • f3ef572d7e92882bab9a75ccfc8949f

    • 705e74fad56ad06622788143904572f

    • 仓库名的必须时昵称+github.io，然后选择的creat就好

      如图：

      1de48b6428044115dc20978b49fb798

      a96c1f58630baf0d6c387d6bbe803ad

      图中的Description可以自由填写

  3. 复制仓库的链接

    • 因为我已经创建了magic-H728.github.io的仓库，无法创建同名仓库，只能创建了magic-H728.github.i用于展示
    • 6f04670d0fc23a34851473532a0a926

  4. 准备部署

    • 在cmd的blog目录下输入一下命令安装部署插件：

      1
      cnpm install --save hexo-deployer-git

      安装时间比较长

      成功安装样例：

      4d27d17dbfbe339f9cedcfe3a50a8dd

    • 修改_config.yml文件

      • 打开blog文件夹，找到**_config.yml**文件

        image-20220219143552428

        _config.yml很重要

      • 使用VScode打开**_config.yml**（其它的用于写代码的也可以，记事本也可以）

        image-20220219143934126

        找到最下面的这一部分，修改为：

        1
        2
        3
        4
        5
        6
        # Deployment
        ## Docs: https://hexo.io/docs/one-command-deployment
        deploy:
          type: git
          repo: #输入GitHub仓库的地址#
          branch: main

        repo后面改为自己GitHub仓库的地址，每个引号的后面都有一个空格

        image-20220220001217110

  5. 开始部署

    • cmd在blog目录输入以下命令，开始部署（请确保你连接了VPN)：

      1
      hexo d

      image-20220219145006031

      第一次输入hexo d后会提示你登录，先使用Token（可能有点麻烦，具体怎么获取Token，搜索关键词Github Token）

      357b34036ae70241305c2b6c17c9075

      仓库中也生成了许多文件

      image-20220219145428295

      如果出现以下问题：

      0df782be0074a4f50a653066e51a734

      在cmd中输入git init ，然后再输入 hexo d

    • 在浏览器输入网站 昵称+ .github.io

      如：magic-H728.github.io

      image-20220219145446626

      部署成功，完结撒花

4.页面美化

  • 看我的博客是不是 高大上 不值一提，所以我们需要美化我们的页面。不然某圈装不了13

  1. 美化方法

    • 目前较为简单的美化方法是使用已有的主题

  2. 安装主题

    • 在cmd的blog目录下输入，安装swig：

      1
      npm i hexo-renderer-swig

    • 在cmd的blog目录下输入GitHub已有的主题链接（链接可以通过Github，CSDN，b站等获取）

      比如使用

      1
      git clone https://github.com/iissnan/hexo-theme-next themes/next

      image-20220219151446013

      image-20220219151536936

    • 在blog\themes文件夹里面可以看见这个主题

      image-20220219151826070

      记住这个主题的名字next

    • 修改blog文件夹里的_config.yml文件

      • 找到第100行

        image-20220219152127678

        将landscape改为我们主题的名字next

        image-20220219152224928

        以下这些配置对应的是网站的名字和作者，可以自行修改

        image-20220219164703958

  3. 生成博客

    每次更换主题后都需要执行下列操作，在每次不确定哪错了也可以尝试这个方法

    • 在cmd的blog目录下输入

      1
      hexo clean
      1
      hexo g
      1
      hexo d

    • 打开网页查看效果

      image-20220219154100488

      （更多好看的主题需要自行探索）

5.编写第一份博客

  1. 在电脑上找到\blog\source_posts文件夹

    image-20220219154339879

    以md为后缀的文件就是我们的博客，这是用Markdown语法编写的。

  2. 打开Typora编写博客

    • image-20220219154600816

    • 编写完成后将文件存在\blog\source_posts文件夹之中

      image-20220219154746253

  3. 然后再cmd的blog目录下输入下列命令：

    1
    hexo clean
    1
    hexo g
    1
    hexo d

    hexo d是将代码推送到github，可以让所有人通过网址看见；hexo s是只能使用当前电脑通过http://localhost:4000/查看，一般用于检查使用

  4. 查看网页

    image-20220219160412938

    哈哈哈哈完结撒花

6. Tips

  • hexo clean是清除已经生成的网页，hexo g生成新的网页，建议每次写完博客后配合使用
  • hexo d是将文件推送到Github，hexo s是在本地开启网站的访问（使用Ctrl+C退出）
  • 大多数的操作都是再cmd的blog目录操作，注意检查。
  • 如果实在没办法，把blog文件夹删除就可以重来
  • 早日学会Markdown语法，很有用！！！！！！
  • 你的网站是部署在GitHub上的（不要钱）！！！
  • 使用请遵守法律法规！！！！！！

完结，撒花！！！