阅读 165

Github Pages + Hexo 3分钟快速搭建个人博客网站

什么是 GitHub Pages?

GitHub Pages 旨在从 GitHub 存储库托管您的个人、组织或项目页面。直接从您的GitHub 存储库托管。只需编辑、推送,您的一切更改就会生效。其他如 Gitee,Coding 等,Pages 使用方式大致相同,不过 Gitee 方式则需要身份认证后才能开启~ 传送门:pages.github.com/

什么是 Hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装前提

安装 Hexo 相当简单,只需要先安装下列应用程序即可:

  • Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)

传送门:nodejs.org/zh-cn/

  • Git

传送门:git-scm.com/

如果您的电脑中已经安装上述必备程序,那么恭喜您!你可以直接前往 安装 Hexo 步骤。

如果您的电脑中尚未安装所需要的程序,请根据以下安装指示完成安装。

安装 Git

  • Windows:下载并安装 git.
  • Mac:使用 Homebrew, MacPorts 或者下载 安装程序
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core
Mac 用户

如果在编译时可能会遇到问题,请先到 App Store 安装 Xcode,Xcode 完成后,启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

Windows 用户

对于中国大陆地区用户,可以前往 淘宝 Git for Windows 镜像 下载 git 安装包。

安装 Node.js

Node.js 为大多数平台提供了官方的 安装程序。对于中国大陆地区用户,可以前往 淘宝 Node.js 镜像 下载。

其它的安装方法:

  • Windows:通过 nvs(推荐)或者 nvm 安装。
  • Mac:使用 HomebrewMacPorts 安装。
  • Linux(DEB/RPM-based):从 NodeSource 安装。
  • 其它:使用相应的软件包管理器进行安装,可以参考由 Node.js 提供的 指导

对于 Mac 和 Linux 同样建议使用 nvs 或者 nvm,以避免可能会出现的权限问题。

Windows 用户

使用 Node.js 官方安装程序时,请确保勾选 Add to PATH 选项(默认已勾选)

For Mac / Linux 用户

如果在尝试安装 Hexo 的过程中出现 EACCES 权限错误,请遵循 由 npmjs 发布的指导 修复该问题。强烈建议 不要 使用 root、sudo 等方法覆盖权限

Linux

如果您使用 Snap 来安装 Node.js,在 初始化 博客时您可能需要手动在目标文件夹中执行 npm install。

第一步:创建存储库

转到GitHub并创建一个名为 username.github.io 的新公共存储库,其中username是您在 GitHub 上的用户名(或组织名称)。可见权限必须设为公开,不然 Github Pages 将无法启用。

如果存储库的开头部分和你的用户名不完全一致,Github Pages 也将无法工作,因此请确保正确。

在这里插入图片描述 注意!新建的存储库默认为空,为了在第二步的拉取 github 存储库中有东西可拉,建议勾上图中的如下选项,以生成一个默认的 README.md 文件:

  • Initialize this repository with a README

第二步:克隆存储库

本地新建要存储项目的文件夹(例如桌面新建一个路径为 C:\Users\adminstrator\Desktop\hexohexo 文件夹),然后克隆存储库:

 git clone https://github.com/{username}/{username}.github.io
复制代码

第三步:安装和初始化 Hexo 项目

请在已经安装完成 Node.jsGit 的基础下进行以下操作

$ npm install hexo-cli -g   #全局安装 hexo
$ hexo init hexo-site 		#在当前目录下,使用 hexo 初始化一个名为 blog 的项目
$ cd hexo-site				#进入 hexo-site 文件夹
$ npm install 				#安装项目依赖
复制代码

安装 Next 主题

如果你使用 Hexo 5.0 或更高版本,最简单的安装方法是通过 npm:

$ npm install hexo-theme-next
复制代码

或者您可以克隆整个存储库:

$ cd hexo-site
$ git clone https://github.com/next-theme/hexo-theme-next themes/next
复制代码

克隆完成后,打开 Hexo 项目根目录下的 _config.yml 配置文件并将主题变量设置为 next。

# 例:C:\Users\adminstrator\Desktop\hexo\_config.yml
theme: next
复制代码

第四步:Hexo 打包博客项目静态文件

npm run build
# or
yarn build
复制代码

Yarn 是 Facebook 开源的与 npm 作用相同的包管理器,同样依赖 Node.js。 传送门:yarn.bootcss.com/docs/instal…

打包命令执行完成后,项目根目录下生成了 public 文件夹及静态文件,如下: 在这里插入图片描述

public 目录下的文件 全部移动 到第二步克隆的 github 存储库 hexo-site 根目录 中,移动后结构大致如下图: 在这里插入图片描述

第五步:推送博客代码到 github 仓库

在 hexo-site 中执行:

git push origin master
复制代码

推送成功,我们就能在 github 仓库中看到我们的博客建站文件啦~ 在这里插入图片描述 github 代码页:在这里插入图片描述 查看 Settings 中的 Pages 页面,提示 Your site is published at https://dreammaker7.github.io/,说明你的网站已经成功应用到 Github Pages 中啦!.....你完成了~~~ 在这里插入图片描述 接下来启动浏览器并转到你的 https:// username .github.io 试试吧。 来看看我配置的个人博客首页:dreammaker7.github.io/

在这里插入图片描述

觉得文章写的不错,点个赞吧,后续将继续更新更多关于 Hexo 的配置和使用教程,你的鼓励就是我坚持的动力~~

文章部分摘自 Hexo、Github Pages 文档: Hexo:hexo.io/zh-cn/docs/ Github Pages:pages.github.com/

文章分类
前端
文章标签