Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学

使用 Hexo 之前,你需要具备一定的 Markdown 基础,推荐观看我的 这期视频

一、搭建环境,部署本地的 Hexo 博客

  1. 打开 Mac 自带的 终端

    • 使用 command+P,输入关键词 终端 然后回车打开
    • 请注意,后面步骤中的代码都需要你复制下来,然后直接粘贴到终端里,然后回车
  2. 安装 Homebrew

    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    

    请注意,Homebrew 的安装有可能失败,如果遇到此类情况请先自行搜索解决办法,本文会在未来补充相关教学。

  3. 安装 Node.js

    brew install node
    
  4. 安装 Git

    brew install git
    
  5. 安装 Hexo

    npm install -g hexo-cli
    
  6. 在 Mac 中新建一个用于存放文章的文件夹,命名为 Hexo

  7. 进入这个文件夹内,然后右键空白处,点击「显示简介」

  8. 在弹出的菜单中,找到文件夹的地址,然后复制这段地址,如下图中的划线位置
    Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图

  9. 在这段地址的最后加上 Hexo 这几个字,获得完整的文件夹地址,例如 /Users/NAS-Home/Document/Hexo

  10. 回到终端界面,输入下面这段代码,然后回车。

    cd /Users/NAS-Home/Document/Hexo
    

    请注意,你需要将上面代码中的地址替换为你在步骤 9 中获得的文件夹地址,并且不要漏掉 cd 后面的空格

  11. 输入下面代码,下载 Hexo

    hexo init
    

    下载成功后,你就能在 Hexo 文件夹内看到如下图所示的文件
    Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图1

  12. 输入下面代码,启动 Hexo

    hexo s
    

    成功启动后,你会在终端上看到一个地址,如下图红框所示
    Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图2
    复制这串地址,然后在浏览器打开,就可以看到你的 Hexo 博客成功安装在本地了
    Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图3
    接下来关掉终端窗口,让我们来模拟一下如何从零开始在 Hexo 发文章。

二、本地文章发布测试

虽然我们的最终目标是要将文章发布到网上,才能让别人看到,不过我们先来测试一下文章在本地发布的效果,在这个过程中你也可以熟悉一下与 Hexo 相关的一些命令或注意事项。

注意: 所有与 Hexo 相关的命令,都需要你通过终端的 CD 命令进入到 Hexo 文件夹内容,然后再执行。这个命令你可以在第一大点的步骤 10 中找到

  1. 准备一篇写好的 Markdown 文章
  2. 在这篇文章的最开头加上以下代码
    ---
    title: 你拟定的标题
    ---
    

    请注意,你必须按照这个格式,否则 Hexo 将无法识别你的文章

  3. 导出这篇文章的 Markdown 文件
  4. 将这个文件放到 Hexo 文件夹中的 Source - posts 子文件夹中,如下图所示
    Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图4
  5. 打开终端,依次使用下面的几个命令
hexo g

这个命令能让你将 Markdown 文件转化为可供阅读的静态网页

hexo s

这个命令能让你在本地启动服务器以预览博客,然后你就能再次看到一串网址:

Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图5
访问这个网址,就能预览你刚才上传的文章了:
Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图6

三、将 Hexo 部署到 Github

接下来我们开始将 Hexo 博客部署到网站上

  1. 注册 Github 账号:点我

  2. 点击按钮,新建一个 repository
    Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图7

  3. Repository name 这一栏,填入 Github 用户名+固定格式,比如我填写的是 leonlin21.github.io,其中 leonlin21 改成你的 Github 账号,欠我的最后的固定格式.github.io 则必须保留:
    Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图8

  4. 点击右下角的 Create repository 按钮,完成 repository 的创建

  5. 添加 SSH Key 到 Github

依次在终端内使用以下命令,请注意这些命令不用 cd 进入 Hexo 文件夹

git config --global user.name "username"
git config --global user.email "example@example.com"

其中 username 是你的 Github 用户名,example@example.com 是你 Github 的登录邮箱,引号需要保留。输入命令后直接回车就好,不会有其他提示。

  1. 通过终端命令生成 SSH Key
ssh-keygen -t rsa -C "example@example.com"

请注意引号内的网址,需要替换为你的 Github 登录邮箱。输入代码后,按三下回车,然后可能会要求你输入密码,这个时候输入你的开机密码然后回车就好,执行完成后会在~/.ssh/id_rsa.pub目录下生成一个公钥文件 id_rsa.pub

如果你找不到这个目录,请参考下图所示的文件夹的位置:

Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图9

  1. 右键 id_rsa.pub 这个文件,然后使用 文本编辑 的方式打开,打开后复制里面的所有内容

  2. 打开这个网址:点我

  3. 点击右上角 New SSH Key,Title 可自定义,Key 的值就是上一步你复制的内容。复制好之后,点击Add SSH Key 按钮即可

  4. 打开终端,输入下面代码,测试是否成功

ssh git@github.com

如果出现提示 Are you sure you want to continue connecting (yes/no/[fingerprint])?,则输入 yes 然后回车,然后再输入你的开机密码即可

  1. 打开终端,用 cd 命令进入 Hexo 文件夹

  2. 输入以下命令,安装 Git 部署插件

    npm install hexo-deployer-git --save 
    
  3. 进入 Hexo 本地文件夹,找到 _config.yml 文件,右键这个文件,在 打开方式 中,使用 文本编辑 模式打开这个文件:
    Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图10

  4. 打开文件后,滑到最下面,找到 #Deployment 这部分的代码:
    Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图11

  5. 将 deploy 后面的代码,按照我的格式进行修改

    deploy:
      type: git
      repo: https://github.com/用户名/用户名.github.io.git
      branch: master
    

    请注意,你需要将上面网址中的用户名改为你的 Github 用户名
    Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图12

    修改完毕后,command+S 保存文件

  6. 回到终端,依次执行以下命令

hexo clean
hexo g
hexo d

这里我忘记截图了,这个时候系统有可能会要求你输入你的 Github 账号和密码。账号不是登录邮箱,而是你的 Github 用户名,而密码则需要你到这个 网站 创建一个 Token:

Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图13

Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图14

最后将这个创建的 Token 输入到终端内,然后回车即可

  1. 打开你这个仓库的 Settings(不是 Github 账号的 Setting)

Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图15

按照下图所示操作,将 Build and deployment 下的 Source 设置为「Deploy from a branch」,然后 Branch 选择「master」,然后单击 Save 保存。

Hexo + Github 免费博客搭建全流程(Mac 系统)|新手教程、零基础手把手教学插图16

  1. 登录 Hexo 博客

现在你应该可以用 用户名.github.io 来登录你的博客了

资源与链接
《Notion 系统课程》
14 天成功众筹 3300 份,一年销售额破百万,也许是国内最好的 Notion 系统课程,欢迎订阅。
课程试读:点我
课程介绍:点我
《Notion 知识星球》
加入笔记与效率工具爱好者社区,获取 Notion 高级模板,与我交流,向我提问。
订阅链接:点我
星球问题整理:点我
《我的账号矩阵》
我的 B 站:点我
微博动态:点我
小红书:点我
公众号:点我
Youtube:点我
声明
本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
Notion

Notion AI 简评 | 有必要订阅吗,和 ChatGPT 的区别是什么

2023-5-12 13:30:31

Notion 知识星球

Notion 知识星球半月报 | 202403 第 1 期

2024-3-11 12:07:34

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索