首页 > 其他分享 >Hexo + GitHub Pages 搭建博客

Hexo + GitHub Pages 搭建博客

时间:2022-09-03 22:45:56浏览次数:83  
标签:GitHub Hexo hexo 主题 blog 文件夹 Pages

前言:

HEXO 是一个快速、简洁且高效的博客框架,

GitHub Pages 是 GitHub 提供的一个网页寄存服务,可用于存放静态网页,包括博客、项目文档甚至整本书。

前提:

1. 创建 GitHub Pages

Create a new repository:

  • Repository name:.github.io
  • Public

创建完成,则博客地址为 https://.github.io,如果 GitHub 账户名中有大写字母,地址会变成小写字母。

2. 安装 Hexo

为 Hexo 创建文件夹如 Blog,进入 Blog 文件夹,在地址栏输入 cmd,则打开的命令行直接为当前目录。

使用 npm 命令安装 Hexo,依次输入:

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

完成后,打开浏览器输入地址:localhost:4000

不报错的话,可以在浏览器看到你的 Hexo 网站。

2.1 Hexo 常用命令

这里也对上面的几句命令进行解释:

npm install hexo-cli -g  #安装Hexo
hexo init blog #初始化博客,名称为 blog,也可以换成其他名字
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

2.2 Hexo 目录结构

进入刚刚建立的 blog 目录,你会看到以下几个主要文件:

img

.
├── _config.yml # 网站的配置信息,可以在此配置大部分的参数
├── package.json # 应用程序的信息
├── scaffolds # 模版文件夹, 模板是指在新建的文章文件中默认填充的内容
├── source # 资源文件夹是存放用户资源的地方, Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去
|   ├── _drafts # 会被忽略,所以看不到
|   └── _posts # 你写的 Markdown 文件会放在这里
└── themes # 主题文件夹,Hexo 会根据主题来生成静态页面。

我们最常用的几个文件是:

  • _config.yml:为网站配置参数,比如下面的部署就是在这里
  • source/_posts:你写的文章都在这里
  • themes:为博客设置主题

3. 将网站部署到 GitHub Pages

还是在 blog 目录下,用命令行安装插件:

npm install hexo-deployer-git --save

然后打开 2.2 提到的 _config.yml(我是用 Notepad++ 打开的,你可以选择其他方式),找到 deploy 关键字(一般在最底下),把相关部分改成:

deploy:
  type: git
  repo: https://github.com/<username>/<username>.github.io.git
  branch: master

比如我的是:

img

接着,依次执行下面两个命令:

hexo clean
hexo d

查看 https://.github.io 上的网页是否部署成功。

注意执行 hexo d 时有时会要求你输入 GitHub 账户和密码,按要求输入即可。

4. 更换主题

现在你看到的博客是默认主题 landscape,Hexo 有丰富的 主题,你可以更换自己喜欢的主题。

进入主题所在的 GitHub 项目,项目的 ReadMe 文件有配置主题的步骤,大部分都一样。

以比较出名的 next 主题为例 GitHUb 地址

在你的 blog 目录右击 Git Bash Here,输入:

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

然后 themes 目录下就会有 next 文件夹或其他主题名对应的文件夹。

打开 2.2 提到的 _config.yml ,找到关键字 theme (在文件下方),把冒号后面的 landscape(默认主题)改为 next 或你下载的主题名。

theme: next

接着,重新生成部署:

hexo g
hexo d

打开你的博客网址,就能看到新的主题啦~

到这一步,如果不出错,你已经完成了博客的部署,接下来,就可以开始你的写作之旅啦

标签:GitHub,Hexo,hexo,主题,blog,文件夹,Pages
From: https://www.cnblogs.com/javaxubo/p/16653865.html

相关文章

  • 详述 GitHub 中声明 LICENSE 的方法
    当我们在GitHub浏览一些开源项目时,我们经常会看到这样的标志:如上图所示,Apache-2.0,我们可以将其称之为开源许可证,那么到底开源许可证是什么呢?开源许可证即授权条款。......
  • Git使用出现[email protected] Permission denied publickey. 处理
    Git使用出现[email protected]:Permissiondeniedpublickey.处理进入gitbash界面然后:第一步,gitconfig--global--list验证邮箱与GitHub注册时输入的是否一致第二步......
  • git解决The authenticity of host ‘github.com (192.30.255.112)‘ can‘t be establ
    git解决Theauthenticityofhost‘github.com(192.30.255.112)‘can‘tbeestablished问题报错完整信息Theauthenticityofhost'github.com(20.205.243.166)'c......
  • 利用 SSH 完成 Git 与 GitHub 的绑定
    如上图所示,进入Settings页面后,再点击SSHandGPGKeys进入此子界面,然后点击NewSSHkey按钮:在「史上最简单的GitHub教程」中,我们已经对GitHub有了一定的了解,包括创建仓......
  • GitHub 主页介绍及修改个人信息
    接着「敲开GitHub的大门-注册账号」一文的内容,我们继续往下介绍:注意:下面的是之前的版本,现在界面已经有所更新了,而且浏览器可以帮助我们翻译成中文,也是比较方便的.......
  • 创建 GitHub 仓库的步骤及方法
    创建GitHub仓库的步骤及方法在「GitHub主页介绍及修改个人信息」一文中,我们已经对GitHub的个人主页有了一些了解,并且完成了对个人信息的修改。但是美中不足的是,我们......
  • 深入理解 GitHub Flow
    深入理解GitHubFlowGitHubFlow是一个轻量级,基于分支的工作流,支持团队和项目的定期部署。本指南介绍了GitHubFlow的工作原理。Step1.创建分支(Createabranch)......
  • Hello World · GitHub 指南
    HelloWorld·GitHub指南简介HelloWorld项目是计算机编程历史中悠久的传统。在我们学习新知识的时候,她也是一个简单的练习。现在,就让我们一起了解GitHub吧!你将学......
  • 初识GitHub · 简介篇
    初识GitHub·简介篇1前言GitHub是一个面向开源及私有软件项目的托管平台,因为只支持Git作为唯一的版本库格式进行托管,故名GitHub。GitHub于2008年4月10日......
  • 使用 Git 和 GitHub - 基本命令
    使用Git和GitHub-基本命令大家好,我们在数据科学训练营的范围内完成了第一节Git和GitHub培训课程。在我日记的这一部分,我将尝试尽可能详细地描述这个软件是如何......