建立个人博客方法 Hexo + Github pages技术

Github pages + Hexo 技术

使用Hexo建立博客站点前提:要有 Git 和 Node.js 环境

  • 一、基础 hexo安装:

  • 1、安装hexo
    下载hexo hexo实在node.js环境下的,所以首先就需要安装node.jshttps://nodejs.org/en/(安装方法可以自己下载node.js点击默认安装就好了)
    node好了之后,进入命令控制器(cmd 或者git base 等均可)开始使用命令建立hexo:

npm install hexo -g (安装hexo的命令方法)

  • 2、新建bolg文件
    hexo好了之后,开始建立自己blog站点(即生成bolg目录)放在自己电脑的那个地方。
    已我的为例 :我放在F盘根目录 gitblog F:\gitblog

hexo init f:\gitblog(初始化创建目录blog文件夹)

  • 3、生成网站
    将gitblog文件生成静态网站

hexo g (或 hexo generate)
(初始化blog静态网站页面)

  • 4、启动服务
    生成静态网站后,启动本地服务,访问本地blog
   hexo server 或 hexo s

输入localhost:4000(或127.0.0.1:4000)访问

关掉服务 ctrl+c
Tip:启动服务,必须在bolg目录下才可以用,所以通常需要我们先通过命令找到blog的目录,然后再启动服务。 如我的操作:
①先找到目录,打开命令输入 cd f:\gitblog
②然后启动服务 输入 hexo s

二、hexo 新建和配置文章

1、配置hexo 上面都是hexo生成默认站点,接下来我们就要改成我们自己的文件,配置站点信息,新建博客等。
配置站点信息 : 打开_config.yml文件 修改里面的信息(如网站标题,网站描述等)
参照官方文档:https://hexo.io/zh-cn/docs/configuration.html
可以打开hexo网站:https://hexo.io 查看hexo使用文档 语言可以切换成中文查看
2、新建bolg

   hexo new  "我的第一篇博客"

之后会在bolg目录的 source_posts 文件中生成一个.md文件


新建好的新文章文件

3、编写新建的博客,用marckdown工具打开新建的md文件(marckdown文件)
-->修改文章标题title:可以修改新建的遍体,这将显示在网页上
-->设置文章标签:


修改新建文章的标题时间和标签

-->设置文章分类:categories
后面加自己的分类就行,注意后面跟的不是同级关系,是父子关系,如图


写文章分类的写法
分类写好在文章的样子

Tip:因为categories是同级关系,要创建其他大类,只需要在下面一篇文章的categories下写出新的分类就好。


文章分类两级写法
分类效果

4、设置博客的一些默认模版参数
scaffolds ->
page:网站界面的模版
post:新建文章的模版
新建文章 -->新建文章 hexo new 新的文章


新建文章 hexo new 新的文章

新建页面page
如 关于我 的页面(站点默认是没有这个页面的,需要我们自己去创建)

hexo new page 新建页面
如 hexo new page 关于我
新建一个 关于我的界面page


hexo new page about 新建了一个about的页面,并放在--source/about目录下
新建page的md文件

5、生成静态文件
其实到这一步,差不多你就掌握了怎么去创建和修改我们的博客了,接下我们要把我们写的文章,生成静态文件,达到可用启用服务,用浏览器来访问。
生成静态文件语法:

hexo generate 或 hexo g


hexo g 生成静态文件

6、发布开启服务:静态网站发布出去后,开启服务,我们就可以在浏览器里面访问了:localhost:4000

       开启服务语法: hexo s
在浏览器输入localhost:4000测试

-->到此为止,我们博客在本地就完全做好了,阶下来,我们只要去github发布就好了。

上面流程开下来,有点乱,重新把写文章的操作代码整理如下
新建文章 : hexo new "新文章名"
生成静态文件 : hexo g
发布到github : hexo d (下面将详细介绍这条命令)


7、文件上传到github上,供访问,使用的是github pagers。
我们在电脑先需要让hexo安装一个deployer ,直接在命令行执行:
npm install hexo-deployer-git --save

然后按一下步骤:
1)首先我们要先创建一个github帐号,(https://github.com/
注册跟其他网站注册一样的,这里没看懂的,可以私信或者底下评论,我会详细回复你。
2)github帐号有了后,登录然后创建我们的新的git项目,
项目名为 :你的git帐号名+github.io
(必须用自己的git帐号开头,不能修改的)

github建立项目的过程

3)配置github 。
项目创建好了后,我们后得到一个SSH值,复制下来,要回到我们创建的本地文件中配置进去,以便我们以后的提交。
在创建本地hexo文件中找到config,如图。

项目配置文件

然后加入这么一段代码,来配置我们的hexo 和 git 。

deploy:
type: git  #部署类型,这里使用git
repo: git@github.com:d**********v/dengdailuv.github.io.git #你从github复制下来的的SSH
branch: master  #部署分支,一般用master主分支
config配置文件添加处

做完上面步骤,我们就可以尝试使用 hexo d 提交我们的代码的了

提交语法  hexo  d
提交本地文件

没有报错,就意味着你的代码提交成功了。
这个时候,我们就可以用
你的git帐号名+github.io
在有网络的地方用浏览器打开了。如
https://dengdailuv.github.io/

文件上线浏览

三、 配置主题

有没有发现我的博客跟你的博客不一样不,那是因为我使用了hexo的next主题。
hexo默认的是landscape这个主题,我们要更换,则需要我们自己去hexo的主题下载 。
https://hexo.io/themes/
选择你喜欢的,然后去下载下来,下载地址一般是主题下面的by **** 点进去,一般会有文档或者引导主题使用操作的介绍,然后在根据它的文档介绍修改就好了。

主题下载地址

1、下载hexo 主题;
2、配置主题,下载好的文件,解压放进我们的本地项目的theme中(里面有个默认的主题landscape),下载的解压只保留主题的名字。


主题下载放置处

3、在项目的config文件配置中配置:


主题配置

一开始这里的是landscape,修改成你下载的主题,其实这个时候你就可以 生成静态文件,在发布出去出去看看样子了。
一般还需要自己在按照文档修改成自己想要的样子,主题文档会有很清楚的书明,按照他的来就可以了。
因为每一个主题的修改操作可能并不相同,我这里就不在过多的介绍,而且主题一般会有比较详细的使用说明,按照文档修改就行了。
ps 我用的是next主题,自己感觉还可以,分享给你们

https://github.com/iissnan/hexo-theme-next  主题下载
http://theme-next.iissnan.com/getting-started.html    使用文档

对于这个主题的使用或者其他主题使用不同的,期待你们在评论区评论,我会告诉你我所知道了,我们一起成长,包括之前的步骤不太明白了,欢迎指出,我会尽力帮大家搭建出自己的博客,加油一起成长。

-----列出hexo常用的命令流程

cd  d:\gitblog      找到我们本地文件(如我的D盘的gitblog文件)所在的位置(这个也是我们hexo安装的位置)
这个操作是必须的,每个命令都在这里开始的
hexo new 文章              新建文章
hexo clead                  清楚操作
hexo g                      生成本地静态文件
hexo s                      启动本地服务(这个可以省略,如不想本地调试的话)
hexo d                      上传git  访问

-----完成这个系列过程,你就新建好了文章,并可以访问
评论区评论你们的疑惑,我们一起用好hexo搭建博客,我自己搭建也用了好久摸索,可是我希望我能帮你们省下这一点时间。

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

推荐阅读更多精彩内容