如何创建GitHub上的个人免费博客

免费个人博客搭建, 这是一篇小白也能看懂的文章,本文主要针对OS X ,Windows 除了软件安装方式和命令有些区别(装了git bash也一样),其他基本一样。

首先列出来两个博客的样式供参考:


image
image

image
image

OK 开始正文

1. 创建GitHub 域名和空间

1.1注册

首先你需要注册一个GitHub账号,已有的可以直接进行1.2,注意username,这会影响到你的域名,你的域名将会是 username.github.io ,所以认真的取个名字,好的名字也让人眼前一亮。


image
image

注册过程可能需要验证你的邮箱,其他就不在赘述。

1.2 创建仓库

然后需要创建一个仓库(repository) 来存储我们的网站,点击首页任意位置出现的 Create repository按钮创建仓库, Respository name 中的username.github.io 的username 一定与前面的Owner 一致,记住你的username下面会用到。


image
image

第一步就已经完成了,下面是安装。

2. 安装

Hexo 可以说是目前最流行的博客框架了,基于Nodejs,更多信息可以google/百度,下面需要安装的工具包括 Git,Nodejs,Hexo。(Windows 用户自行搜索这些工具,直接安装即可)

2.1 安装Git

// 首先打开终端使用“brew help”检查是否已经安装HomeBrew

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"    //如果已安装HomeBrew 无需执行此行

$ brew install git   // 安装Git

你也可以通过下载安装程序来安装

2.2 安装Nodejs

先安装nvm,这是Nodejs版本管理器,可以轻松切换Nodejs版本。 这里有两种方式安装。如果使用curl的方式安装,安装完成之后一定要重启终端。

  1. Homebrew 安装方式,此安装方式无需重启
$ brew install nvm  
$ mkdir ~/.nvm
$ export NVM_DIR=~/.nvm
$ . $(brew --prefix nvm)/nvm.sh
  1. curl安装方式,此安装方式需要重启
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh     //安装完成后,重启终端 

安装完成后,重启终端 并执行下列命令即可安装 Node.js。

首先查看一下可以使用的版本,然后再执行安装

$ nvm ls-remote

可以安装任意一个所列出的node.js的版本
例如:

$ nvm install 6.4.0
  1. 安装Hexo
    确保以上所有都安装完成之后再安装Hexo,如果此步不成功那就看看上面的是否安装成功
 $ sudo npm install hexo-cli -g

所有必须工具已经安装完成,下面我们就可以生成博客,上传至我们的GitHub 仓库了。

3. 编写,发布

接下来我们需要用Hexo初始化一个博客,然后更改一些自定义的配置,或者加上自己喜欢的主题,写上第一篇文章,然后发布到自己的个人GitHub网站(username.github.io)。

  1. 创建博客
    将下面的 username 替换成你自己的username(其实也无所谓,作者强迫症),执行成功后,会创建出一个名为 username.github.io 的文件夹。
$ hexo init username.github.io
  1. 更改配置
    主题安装
    为了使博客不太难看,我们需要安装一个主题,切换至刚刚生成的Hexo 目录,安装主题
$ cd username.github.io
$ git clone https://github.com/iissnan/hexo-theme-next themes/next //“themes”是“username.github.io”文件夹里面的一个文件夹,“next”是对即将下载的一个主题包文件的命名

这里选了一个极简的主题,也是Hexo众多主题中最受欢迎的一个。上面出现的喵神的主题在这里
如果想要使用其他主题只需要点击更多主题进入后选中其中一个在详情页面中找到GitHub的标志点击,然后复制地址替换上面两行命令行的第二句中: https://github.com/iissnan/hexo-theme-next 并且为其改一个名字即可,另一个获取主题的简单方式就是直接在GitHub中搜索"hexo-theme"就能够获得无数主题,随便找几个喜欢的下载,获取地址的操作步骤如下面两图:

image
image

image
image

基础配置:打开文件位置username.github.io/_config.yml修改几个键值对,下面把几个必须设置的列出来按需求修改,记得保存, 还有注意配置的键值之间一定要有空格。更多设置...

title: 勇不言弃     //你博客的名字
subtitle: 创建一个技术博客是分享自己对某一技术点的理解,有的人看到后学习了会对你心存感激,有的人看到了会对你指点。在学习以及分享的同时如果交到几个朋友那更是意外收获。    //显示在博客名字下方,类似于个性签名
author: ly92        //你的名字
language: zh-Hans    //语言 中文

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape    //themes文件夹目录下任意一个主题的名称

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git   //使用Git 发布
repo: https://github.com/ly92/ly92.github.io.git       // 刚创建的GitHub仓库(可能需要自己添加此行)

基础配置:
基础配置文件在username.github.io/themes/next/_config.yml中修改,这里略过。设置详情

  1. 写文章
    所有基础框架都已经创建完成,接下来可以开始写你的第一篇博客了
    在username.github.io/source/_posts下创建你的第一个博客吧,例如,创建一个名为BeforeCreateBlog.md的文件,然后编辑内容。
// 在_posts文件夹下创建xxxxx.md,并打开编辑
$ cd /Users/kakatool/ly92.github.io/source/_posts 
$ touch xxxxx.md
$ open xxxxx.md     //一般使用Xcode打开

如:

---
title: 如何创建GitHub上面的个人免费博客
---
免费个人博客搭建, 这是一篇小白也能看懂的文章,本文主要针对OS X ,Windows 除了软件安装方式和命令有些区别(装了git bash也一样),其他基本一样。

首先列出来两个博客的样式供参考:
![image](https://raw.githubusercontent.com/ly92/images/master/BeforeCreateBlog/BeforeCreateBlog_1.png)
![image](https://raw.githubusercontent.com/ly92/images/master/BeforeCreateBlog/BeforeCreateBlog_2.png)
  1. 测试(可以省略)
$ hexo s

测试服务启动,你可以在浏览器中输入https://localhost:4000 访问了。

  1. 安装hexo-deployer-git自动部署发布工具
 $ npm install hexo-deployer-git --save
  1. 发布
    测试没问题后,我们就生成静态网页文件发布至我们的GitHub pages 中。
$ hexo clean && hexo g && hexo d

终端可能会让你输入GitHub的邮箱和密码(我的没有要求输入,可能因为之前输入过),正确输入后,骚等片刻,就会把你的博客上传至GitHub 了。以后在每次把博客写完后,执行一下这个命令就可以直接发布了,非常方便。

  1. 查看效果
    恭喜你能走到这一步,你的博客已经完成了,在浏览器中输入 https://username.github.io 就能够访问了。
    最后应该是类似这个样子的

    image
    image

  2. 补充
    也许第二次进入编写项目时会遇到这种问题,(我遇到了)
    kakatooldeiMac:~ ly$ hexo clean && hexo g && hexo d
    -bash: hexo: command not found

我的解决方式如下:
这需要你先到“username.github.io”路径下,然后执行“export NVM_DIR=~/.nvm && . $(brew --prefix nvm)/nvm.sh”后再执行“hexo clean && hexo g && hexo d”才可以,我直接在username.github.io文件中添加“firstStep.sh”内容为:
cd /Users/kakatool/ly92.github.io
export NVM_DIR=~/.nvm && . $(brew --prefix nvm)/nvm.sh
hexo clean && hexo g && hexo d
这三行,这样可以在编辑好username.github.io/source/_posts中的XXXXX.md文件后直接将“firstStep.sh”拖拽到终端点击回车键即可,如下:


image
image

image
image
Last login: Mon Aug 22 20:09:55 on ttys001
kakatooldeiMac:~ ly$ /Users/kakatool/ly92.github.io/firstStep.sh 
INFO  Deleted database.
INFO  Deleted public folder.
INFO  Start processing

......      //省略 n 行

INFO  Generated: vendors/font-awesome/fonts/fontawesome-webfont.svg
INFO  Generated: 2016/08/22/ImageEntrepot/index.html
INFO  Generated: js/src/schemes/pisces.js
INFO  72 files generated in 833 ms
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
[master 1ca6ec9] Site updated: 2016-08-22 20:10:29
1 file changed, 1 insertion(+), 1 deletion(-)
To https://github.com/ly92/ly92.github.io.git
45d59af..1ca6ec9  HEAD -> master
Branch master set up to track remote branch master from https://github.com/ly92/ly92.github.io.git.
INFO  Deploy done: git          // *********注意,看到此行才表示发布成功
kakatooldeiMac:~ ly$ 

关于博客中上传图片的方式将会在ImageEntrepot里面介绍,本文是使用的GitHub中另一个仓库的图片文件images如果需要可以Fork一下

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容