Mac搭建github Page的Hexo免费个人博客

1.基础准备

  1. github账号
  2. 安装git
  3. 安装node.js、npm(本人使用淘宝镜像)

2.创建repo

newRepository.png

需要注意的地方,我都做了标注,如图所示,本人账号zhouxxiaolong,repository name 就必须是zhouxxiaolong.github.io;其他未标注选项默认就好。

3.配置SSH key

这一步并不重要,配置SSH key与否,并不影响博客的搭建和使用,只是配置了之后,更新博客方便一点,不用每次都输用户名和密码。

  • 打开终端,输入如下命令
cd .ssh
ls -la

检查终端输出的文件列表中是否已经存在id_rsa.pub 或 id_dsa.pub 文件,如果文件已经存在,那么你可以跳过步骤

  • �创建SSH key
    $ ssh-keygen -t rsa -C "your_email@example.com"
    注:此处邮箱为注册github账号的邮箱
    回车,接着会提示你,让你输入文件名,直接回车会创建使用默认文件名的文件(推荐使用默认文件名);
    然后会提示你输入两次密码(输入密码之后没有反馈,显示还是空白,但是你确实已经输入了),当然密码也可以不输,直接回车,如果这里没有输入密码,以后提交博客更新的时候就不需要输入密码了。
  • 添加SSH key到github
    经过第二步,如果你没有指定文件名(也就是使用的默认文件名),那么你的.ssh文件夹下,应该有一个id_rsa.pub文件了,打开该文件,复制里面的文本。
    然后登陆github,点击右上角头像右边的三角图标,点击Settings,然后在左边菜单栏点击SSH and GPG keys,点击new ssh key,title 随意填,在key 栏填入你复制的内容,点击add ssh key,就可以添加一个ssh key了。
  • 验证SSH key是否配置成功
    终端输入:
    ssh -T git@github.com
    回车,你会看到如下回复,说明你的ssh key添加成功了。
    Hi zhouxxiaolong! You’ve successfully authenticated, but GitHub does not provide shell access.
    如果过程中提示你perimission deny相关错误,就在命令前加上sudo 然后执行命令的时候输入你的appleid密码应该就可以了。sudo用来说明用管理员权限运行。

4.安装Hexo

  • 终端输入:
    npm install -g hexo
  • 初始化,创建所需资源
    新建任意名字文件夹,cd进入该文件夹后,执行如下命令
hexo init
npm install
  • 生成并发布
hexo g  // 全拼是:hexo generate,可以简写成 hexo g
hexo s  // 全拼是:hexo server,可以简写成 hexo s

这样就开启了一个本地博客服务器,打开浏览器,在地址栏输入http://localhost:4000,就可以查看本地博客了,hexo默认生成了一片hello world博客。
注:以上hexo开头的命令,执行目录必须是你创建的博客文件夹目录,因为只有在那个文件夹下才有创建和发布hexo的所有资源。

5.同步Hexo到Github

  • 安装
    npm install hexo-deployer-git --save
  • 打开本地博客目录的_config.yml文件,编辑其中的deploy节点
deploy:
type: git
repository: https://github.com/zhouxxiaolong/zhouxxiaolong.github.io.git
branch: master

注:“: ”后面的空格,这是个坑
repository地址从下图中即可获取

url.jpeg

保存即可
当然可以使用SSH地址作为repository地址,点击右上角Use SSH,之后操作相同。

  • 生成和发布
hexo clean  // clean本地项目,防止缓存
hexo g      // 根据你编辑的md格式的博客,生成静态网页
hexo d      // 将本地博客发布到github

然后,在浏览器地址栏输入yourusername.github.io就可以访问你的博客了,别人也可以通过这个地址访问你的博客。

6.Hexo常用命令行

hexo init      //在指定目录执行该命令,会将当前目录初始化为hexo站点,生成hexo站点所需的一切文件
hexo new “my new blog title”  //新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。
hexo clean      // 清除缓存,如果对本地文件做了修改,同步到远程验证修改的效果之前,先clean,清除缓存
hexo generate  // 可以简写成hexo g 根据markdown文件生成静态文件
hexo server    // 或者简写成hexo s 启动本地hexo 服务器,默认localhost:4000可以访问
hexo deploy    // 或者简写成hexo d 将本地修改,部署到远端
hexo version    // 显示hexo版本

7.其他常用操作

  • 新建博文
    hexo new "the title of your blog"
    建议学习 写作 | Hexo
  • 删除博文
    删除自动生成的hello world
    找到/source/_posts文件夹,里面放了所有我们写的博客,想删除哪篇,直接在这里删除,然后再重新发布到github,这篇博文就不见了
  • 给博文添加tag和分类
    创建的新博文文件,打开之后顶部会有一段自动生成的文本,在其中加入tag和category标签即可指定tag和分类。
---
title: blog title
date: 2016-07-20 10:59:31
tag: hexo        // 指定本篇文章tag标签
category: hexo  //  指定本片文章分类
---
  1. 编辑_config.yml
    post_asset_folder: true
    这样hexo会在每次使用hexo new title命令时在文章源文件目录下创建同名文件夹来存储资源.
  2. 实现
photo.jpeg

markdown中引用这么写:

{% asset_img newRepository.png 创建repository%}

asset_img 表示要引用图片, newRepository.png是标题, 后面的是图片显示的标题和悬浮时的提示。

8.安装Theme

  1. 终端cd到hexo所在文件夹执行如下命令:
    git clone https://github.com/iissnan/hexo-theme-next themes/next
  2. 将hexo目录下_config.yml里theme的名称landscape修改为next,重新部署就可以了。
  3. fork me on github
    如果你访问我的个人博客,你会发现右上角有一个倾斜的fork me on github 图标,想要集成这个图标,去这里挑选你喜欢的样式,把样式代码复制过来。
    本地博客目录下的themes/next/layout/layout.swig文件,然后把你复制过来的样式代码粘贴到如下位置。
forkMe.jpeg
  1. 可以选择其他主题Themes | Hexo,方法同上。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容