详细 hexo+Github Pages-搭建个人网站

  • 为什么选择hexo?
  • 搭建博客的基本步骤
  • 部署到Github Pages
  • 域名解析

为什么选择hexo?

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


搭建博客的基本步骤

  • 购买域名
  • 安装hexo
  • 注册github

一:购买域名

若小胖友们想把个人博客挂到属于自己的域名上,博主在这里建议大家提前把域名买好。
博主购买域名的地方是万网,注册登录后,填写你想要的域名


选择完自己域名后,付费就可以了!
(博主建议个人域名选择.me为后缀的较好-博主的域名就为carryguan.me)

二:安装hexo

装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:
Git
Node.js

若你是IT小白,安装git/node没成功,博主carry给你个福利贴士
(博主就是这样一点点过来的 (# ̄▽ ̄#))
windows安装git
windows安装node.js

如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。

在这里建议小胖友们,先预习一下:
git入门教程
github趣味详解

先进入一个文件夹路径:例如我的

再执行下面的命令:

npm install -g hexo-cli

初始化框架
执行如下语句

 hexo init blog

(blog是我自己建立的用来装博客的文件夹)

2:再执行

cd blog

3: 最后执行

npm install

以上三条语句执行完毕后, 你会在blog文件夹里看到如下:

 ├── _config.yml //网站的配置信息,您可以在此配置大部分的参数。 
 ├── package.json 
 ├── scaffolds //模版文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。 
 ├── source //资源文件夹是存放用户资源的地方。
  | ├── _drafts
  | └── _posts 
 └── themes //主题文件夹。Hexo会根据主题来生成静态页面

最后看看你自己的个人网站:
在blog目录下执行gitbash命令:

1:新建一篇文章(我的第一篇文章)

 hexo new "我的第一篇文章"

会在/source/_post里自动生成了“我的第一篇文章.md”文件,之后新建的文章都将存放在此目录下。编辑“我的第一篇文章.md”文件可修改内容。

2:生成网站

hexo generate (可简写成 hexo g)

3:启动本地服务器

 hexo server (可简写成 hexo s)

4:在浏览器输入http://localhost:4000 即可查看网站。

三:注册github

github
填写完相应信息,注册成功后,重新登录,进入到这个页面


点击图片中所圈位置出现了如下:

Repository name里填写:你的用户名.github.io
(例如我的用户名是sunningcarryhaha,所以我的Repository name:sunningcarryhaha.github.io)
Description里随便填一下你的描述就好
Public选中
选中Initilize this respository with a README
最后点击绿色按钮创建


创建成功后
配置SSH-Key
详细步骤请点击此文章


将blog部署到Github Pages 上

两种方法:

  • 使用hexo deploy部署
  • 使用git push 部署

1:hexo deploy部署

找到blog目录下的配置文件_config.yml,用编辑器打开此文件
找到此文件中的deploy字段,按照以下配置
deploy:
type: git
repo: git@github.com:sunningcarryhaha/sunningcarryhaha.github.io.git
branch: master
注意需要提前安装一个扩展:
$ npm install hexo-deployer-git --save
然后在命令行中执行
hexo d

不幸的是,上述命令虽然简单方便,但是偶尔会有莫名其妙的问题出现,因此,我们也可以追本溯源,使用git命令来完成部署的工作。

2:使用gitbash,将public文件夹上传到自己的仓库中

第一步:进入到你的blog目录

 cd blog

第二步 :初始化博客

hexo g

第三步:把public文件夹上传到github仓库中

cd public
     git init (初始化本地仓库)
     git add .  (将本地文件加到仓库里)
     git commit -m "message" (设置提交信息)
     git remote add origin   git@github.com:sunningcarryhaha/sunningcarryhaha.github.io.git(本地仓库链接远程仓库)
     git push -u origin master (push文件到仓库中)

git@github.com:sunningcarryhaha/sunningcarryhaha.github.io.git
解释一下 :
sunningcarryhaha是用户名
sunningcarryhaha.github.io 是仓库名称
.git是后缀

详细的步骤可参考此
github push
git github 问题总结

部署成功以后,在浏览器中输入你的repository名字:例如我的sunningcarryhaha.github.io
就可以看到你的网站了


域名解析

  • 进入万网进行域名绑定
  • 进入public,新建CNAME
  • 把域名写到CNAME里
  • 传到github仓库里
    1:进入万网进行域名绑定





    安照以上图片进行操作
    ** 尤其注意:记录值那里填写的是:sunningcarryhaha.github.io.,也就是你的仓库名字后还有个"." **
    以上进行完毕后,接着下一步

2:进入blog下的public文件夹,新建 CNAME



3:将public文件夹下的CNAME上传到github仓库中



如果上传成功的话,进入到你的github仓库中会看到CNAME文件

4:为了防止域名解析出问题,博主建议将blog下的public下的CNAME文件,复制到blog下的source文件夹里,这样更新public,不会出现CNAME文件丢失的情况


如果以上步骤都进行完毕的话,博主carry恭喜你:bowtie:,小胖友你zen棒,现在在浏览器输入你的域名,就可以成功的看到你的个人网站啦!
当然这个网站还可以换主题,美化!这方面的文章敬请期待,博主会继续出博文的!


这个博客博主搭建了好久,走了好多弯路(原谅博主比较笨,呜呜!)
期间出了好多问题,最根本的原因是博主git方面不基础不好,所以建议小胖友们多练习一下git
这里推荐:
git入门教程
node.js安装菜鸟教程
git上传代码到github仓库
hexo官网
markdown入门
hexo主题推荐
next-hexo主题
hexo常见问题解决方案

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

推荐阅读更多精彩内容