Github Pages 搭建HEXO主题个人博客

跌跌撞撞,总算是建立起来了。回首走过的这么多坑,也真的是蛮不容易的。那么就写点东西,记录我是怎么搭建的吧。


准备工作

  • 安装Node.js: 用于生成静态页面,我们需要到官网上去下载即可。http://nodejs.org
  • 安装Git:作用就是把本地的hexo内容commit到我们的远程仓库,实现更新操作https://git-scm.com/download/
  • 申请GitHub账号:用来盛装我们的代码,这样才能够被访问,程序员如果没有这个账号,那我就不说什么了。

    SSH Keys,看你自己了,可以不配制,不配置的话以后每次对自己的博客有改动提交的时候就要手动输入账号密码,配置了就不需要了。至于怎么配置,网上的资源很多。

安装HEXO

进行到这一步的前提是你已经安装好了Node.js和Git了,不然接下来的你是没办法进行下去的。

随便找一个文件夹,然后右键使用gitbash打开:

npm install -g hexo // 即使用npm命令进行全局安装hexo

然后就是对这个文件夹进行初始化的操作:

hexo init

进行到这一步,基本上全部的安装工作也算是完成了。这个hexo init的文件夹,就是你的项目的根目录咯。

撰写博客

经过了刚才的那些繁琐的安装流程,接下来的就轻松了。我们只需要使用几个有限的命令,就可以生成页面精美的博客了。

首先还是浏览一下常用的命令吧:

  • hexo new “postName” #新建文章
  • hexo new page “pageName” #新建页面
  • hexo generate #生成静态页面至public目录
  • hexo server #开启预览访问端口(默认端口4000,’ctrl + c’关闭server)
  • hexo deploy #将.deploy目录部署到GitHub
  • hexo help # 查看帮助
  • hexo version #查看Hexo的版本

然后我们就正式开始吧,使用hexo new “BlogName” 就可以创建一个新的.md文件(markdown文件,大家可以参考我之前的这篇文章。Markdown 入门与提高

然后,我们可以进入到source文件夹下,通过查找就可以找到了。我们可以随意的使用任何的文本编辑器编写markdown类型的博客内容。写完之后,保存即可。

最后在git bash中使用

hexo generate // 生成html类型的博文

这样,我们的编辑工作就完成了。

部署博客到GitHub

我们可以手动的使用浏览器的方式进行upload文件,但是每次都要很繁琐的进行一系列的操作,我不太喜欢这种方式。所以我仍旧是用命令行来完成提交。

当然了,我们要想使用git命令,得有一点git的基础才行。大家仍旧可以参考我之前的文章:
GitHub 如何提交代码,即问题汇总

Git客户端及常用的Git命令

然后最最重要的就是配置根目录下面的_config.yml文件了,具体的大家可以参考我的这个,有人可以到网上搜索一下。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 博客主标题
subtitle: 人生的乐趣不止编程,但没有编程,一定不快乐!
description: 记录进步的点点滴滴
author: 你的名字
language: default
email: 你的邮箱
timezone: Asia/Hong_Kong

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://guoruibiao.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:你的GitHub账号/你的GitHub账号.github.io.git
  branch: master

接下来就可以部署我们已经编写好的博客内容了。

总的来说需要三个命令:

hexo clean // 清理文件

hexo generate  // 生成目标的html

hexo deploy  //  发布

我遇到的问题

我遇到的问题比较的奇葩,我的配置文件明明是正确的,我也检查了好几遍,但是每次deploy的时候,它总会将我的项目文件全部的上传到我的GitHub仓库。导致我访问我的io账号的时候出现404错误。

我的解决办法:

我每次完成编写,生成html之后。不会使用hexo deploy命令。
而是手动的在我的public文件夹下:

git add .
git commit -m 'update'
git remote add origin git@github.com:yourAccount/yourAccount.github.io.git
git push -u origin master -f

这样强制性的提交代码,就不会出现404错误了。

总结

搭建Github Pages的这个流程说起来复杂,但是完成后看起来也不复杂。可能就在于对一个新知识的接受需要一个过渡吧。未知的总是充满着晦涩难懂的概念。

不过,跌跌撞撞。总算是完成了,接下来的任务就是更换主题,添加sitemap,以及添加评论功能了。大家可以参考下面的这篇好文
搭建HEXO静态博客

HEXO主题选择

时间: 2024-09-18 23:48:54

Github Pages 搭建HEXO主题个人博客的相关文章

使用Github Pages和Hexo构建个人博客

Github Pages可以创建免费的静态站点,支持自带主题.支持自制页面等,并且可以使用Jekyll或者Hexo等静态博客框架进行管理. 独立博客是博客园等博客平台之外的一个良好补充,相比使用虚拟主机或者云服务器搭建站点,静态博客管理和使用简洁,使用Github Pages搭建博客不失为一个好选择. 使用Github很快就可以搭建一个站点,可以分为以下几步: 在Github创建对应仓库 配置Jekyll或者Hexo环境 设置主题,安装评论等插件   一.使用Github创建站点 1.创建一个新

github pages帮助如何创建个人博客

创建一个简单,可以访问的github 个人博客:https://pages.github.com/ 个人博客如何绑定自己的域名:https://help.github.com/articles/about-supported-custom-domains/#www-subdomains 用Jekyll来快速生成 博客模板:https://help.github.com/articles/using-jekyll-as-a-static-site-generator-with-github-pag

Mac下体验Hexo与Github Pages搭建

很久之前就知道Github可以发布自己的博客,因为仅支持静态文件,一直懒于动手自己进行编辑.再了解到还存在 JekyII 和 Hexo 这样的内容生成框架后,终于决定体验一下. 一.本地环境准备. Github Pages的申请过程就不再搬砖,Github的页面上说的很清楚,注意每个用户只能创建一个与自己用户名相同的Pages. Pages申请好之后,可以克隆到本地的文件夹,这样 hexo 运行的文件夹就准备好,可以开始准备本地的hexo环境. hexo需要有nodes和nam的支持,我先安装了

Pelican + Github 搭建自己的静态博客

//想了解更多请访问我的新网站:晓的博客zhangxiaolong.org 之前在Github上使用基本的jekyll模板搭建过一个博客,但是那时候前端技术的水平有限,搭出来的博客很不好看,一些基本的功能实现不出来, 之后又转向了Octopress模板,它是R系语言的编写的jekyll模板,又上手操作开发了一段时间,已经基本做出来了,但是奈何主题模板博主觉得都不好看,所以自己操作来做,发现Ruby语言不好下手啊,折腾了好久没有修改成博主喜欢的样式. 最后,同学推荐有一个使用Python语言写的P

Github、Jekyll 搭建及优化静态博客方法指南

尝试自己写 Blog 的人,一般会经历三个阶段. 第一阶段,刚接触 Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客. 第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章. 大多数人,都停留在第一和第二阶段,因为第三阶段不太容易到达:你很难找到俯首听命.愿意为你管理服务器的人. 前两天在站长之家里面看到一个文章,讲的是如何在 github 上搭建 Blog,现在分享给大家.比较详细的介绍了

Github pages搭建网页

刚刚搭建了一个简单的页面,看看效果. 什么是Github page  ?       https://pages.github.com/ GitHub 是一个共享虚拟主机服务,用于存放使用Git版本控制的软件代码和内容项目. Github pages 是Github 提供给用户搭建个人博客或静态网页的平台 . 1.注册帐号 2.在代码仓库里建一个以用户名开头+github.io的仓库,如下: 3.在代码仓库里添加页面 4.使用Github客户端管理网站. 将新文件放入本地的github的目录下,

40个互联网主题知名博客

中介交易 SEO诊断 淘宝客 云主机 技术大厅 以下是从我订阅的近500个国内IT业活跃博客中,精选出来的持久关注国内外互联网产业发展的知名作者博客,选择的标准不是这个人是否出名,完全在于他的内容是否能引发思考,是否能带来有价值的观点,这个也是我自己判断是否关注一个博客的标准. 在过去很长一段时间里,他们持久的更新,奉献了大量的原创内容,为中文互联网行业提供了大量的真知灼见.更重要的是,他们的更新,为博客作为一种媒体内容的存在,提供了佐证,随着blog写作的不断沉淀,他们将促进blog媒体的形成

hexo+github搭建个人免费博客

最近在淘宝逛到一个卖盗版书的店铺,真的是便宜的不要不要的,哈哈. 网上hexo+github的博客教程太多了,我今天就讲讲一下实现小细节和思路吧,都是github上面的issue 看看我搭建的hexo主题的博客,哈哈 开始旅程了 创建一个github站点 可以参考鸿洋大神的如何利用github打造博客专属域名,这篇博文看下来,你就会拥有像我 这样MRwangqi.github.io的链接,在仓库下面放个index.html,就能访问到页面了. 安装node环境 可以参考我的文章weex初体验,这

使用hexo在GitHub上搭建个人博客网站

前言 为什么要使用GitHub Pages搭建博客? GitHub使用免费,空间充足 管理安全方便,基于GitHub版本控制 定制化程度高,与其他博客网站相比没有什么约束 可以自由指定域名且不许要备案 基于全球最大的男性交友网站GitHub,方便交流... 所需环境 node.js@5.5.0 git@1.9.2 hexo@3.2.2 Github账号 新建一个repository repository名称为 username.github.io 随便选择一个主题 此时在浏览器中输入 usern