手把手教你如何使用github和hexo从0开始搭建静态博客

123 阅读2分钟

前置知识扫盲

在构建静态博客之前,你需要了解以下概念和工具。 这些基本概念很简单的,不懂再回来看,以确保你能够顺利地完成整个过程

  1. 基础命令行使用:了解如何在终端或命令提示符中搜索你的文件系统并执行命令,例如 常见的命令 cd, mv等
  2. Git 和 GitHub 基础:理解用 Git 进行版本控制和如何使用 GitHub 托管你的代码和网站的基础知识。涉及到的关键概念包括仓库、提交、分支和拉取
  3. Markdown 语言:Hexo 使用 Markdown 进行内容创建,学习 Markdown 可以让你轻松的编辑文档(这个用到的时候随时查阅即可)
  4. Node.js 和 npm(Node 包管理器) :Hexo 是一个 Node.js 应用,理解如何安装和使用 Node.js 和 npm 包

构建你博客的分步指南

步骤 1: 安装 Node.js 和 npm

  • nodejs.org/ 下载并安装 Node.js,npm 会与 Node.js 一起捆绑安装

步骤 2: 安装 Git

  • git-scm.com/ 下载并安装 Git。安装时,选择将 Git 添加到系统路径的选项

步骤 3: 设置 GitHub 账户

  • 如果你还没有,创建一个免费账户在 github.com/ 这个账户将托管你的博客仓库

步骤 4: 安装 Hexo

  • 打开你的终端或命令提示符
  • 运行 npm install -g hexo-cli 全局安装 Hexo

步骤 5: 创建你的博客

  • 在黑乎乎的命令行窗口中,进入到你想把你博客放到的路径下
  • 运行 hexo init my-blogmy-blog 目录创建一个新博客
  • cd my-blog 进入你的博客目录
  • 运行 npm install 安装必要的依赖

步骤 6: 本地生成并运行你的博客

  • hexo generate 生成静态文件
  • hexo server 启动服务器
  • 在你的网页浏览器中访问 http://localhost:4000 来看你的博客

步骤 7: 自定义你的博客

  • 编辑你博客目录中的 _config.yml 文件来自定义你的网站的标题、描述、作者和其他设置
  • 使用 hexo new "文章标题" 创建新帖子
  • 自定义主题或从 Hexo 主题目录安装一个新的

步骤 8: 将你的博客部署到 GitHub Pages

  1. 创建一个新仓库:在 GitHub 上创建一个名为 <yourusername>.github.io 的新仓库
  2. 安装 Hexo 部署器:在你的博客目录中,运行 npm install hexo-deployer-git --save 安装 Git 部署插件
  3. 配置部署:在你的 _config.yml 中,添加以下部署设置:
deploy:
  type: git
  repository: https://github.com/<username>/<username>.github.io.git
  branch: masterxxxxxxxxxx deploy:  type: git  repository: https://github.com/<username>/<username>.github.io.git  branch: masteryaml

最后运行 hexo deploy 将你的博客推送到 GitHub Pages, 此时你的博客应该位于 https://.github.io上面