三分钟搭建个人博客(Hexo + Next + github)详细教程

每个程序员必不可少的就是博客网站了,一开始我们并不知道可以搭建属于自己的个人博客网站,通常会在CSDN、博客园等别人搭建的博客网站写博客,当你写久了以后会感觉很 low, 一些文章需要审核通过才能发布。索性我们还不如自己搭建一个个人博客,个人博客的设计美化和内容都按照自己喜欢的要求来,然后在阿里云买一个高大上的域名,岂不是很装逼?尽管你没有学过网页 web 开发,但是通过这篇小鹿详细教程可以亲自搭建起属于自己的个人博客。

小鹿的博客网址:小鹿的博客

建站前的准备

建站之前我们先要做好准备工作,将相关的工具准备好。

安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

安装网址:https://nodejs.org/zh-cn/
验证是否安装成功:打开 cmd 命令行(win+r 输入 cmd 回车)执行 :

node -v
npm -v

安装成功之后显示版本号:


node-v.png
npm-v.png

安装 Git

通常使用 github 的对 git 并不陌生,Git(读音为/gɪt/。)是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。 [1] Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

安装网址:https://www.git-scm.com/download/win
验证是否安装成功:打开cmd命令行(win+r 输入cmd回车)执行 :

git --version

安装成功之后显示版本号:


git-v.png

安装 Hexo

Hexo 是一个快速、简洁且高效的博客框架。

了解更多关于 Hexo 请查看官方网站:Hexo

安装 hexo 框架

下面一起来看看怎么安装 Hexo 框架?
首先选择一个文件夹,这个文件夹主要存放关于你博客的配置文件以及以后要写的的文章,在该文件夹的根目录运行之前下好的 git-bash.exe

VIZCAI6IPRQ`SW86Y@B5`1Q.png

输入命令开始安装:

$ npm install -g hexo-cli

这里安装的是 Hexo 最新版本,如果想安装以前的的版本请运行命令 $ npm install -g hexo
以上步骤不出问题的话就已经在本地机器上搭建起了 Hexo 环境。
下面介绍 Hexo 的具体使用方法。

初始化Hexo

创建hexo工程

$ hexo init blog

创建一个文件夹blog(blog 为文件夹的名字,可改成自己想要的名字),使用 Hexo 命令初始化 blog 为 hexo 工程目录。

新建POST

 $ cd blog
$ hexo new “HelloWorld”

进入初始化后的 blog 文件夹,创建名为HelloWorld的文件,此时会在 /blog/sources/_post/ 目录下生成 HelloWorld.md 文件。

生成静态文件

$ hexo generate

使用 Hexo 引擎将 Markdown 格式的文件解析成可以使用浏览器查看的 HTML 文件,HTML 文件存储在 blog/public 目录下。

运行hexo服务器

$ hexo server

打开命令行提示的地址,一般是 http://localhost:4000/,既可以看到我们的 Hexo 网站。
此时 Helloworld 文章中没有任何内容。打开 /blog/sources/_post/ 目录,使用编辑器打开其中的 HelloWorld.md并在其中添加 markdown 格式的内容保存,然后重新运行以下命令:

$ hexo generate
$ hexo server

命令的含义hexo generate 生成静态文件, hexo server 启动服务器。默认情况下,访问网址为: http://localhost:4000/。 如果重新改变端口号请详细查看官网文档,这里不多介绍。
注意:如果在 HelloWorld.md文件中有中文,在网页进行浏览可能出现乱码,解决方式通过编辑器打开 HelloWorld.md 文件把编码方式改成 utf-8 就可以了。

安装主题

Hexo 提供了默认主题 landscape,主题的位置在 blog ->themes 文件夹下。主题根据自己喜好可以在网上找到,通过 Git 进行相应的下载。下面小鹿贴出几个主题可以进行相应的下载,喜欢哪一个可以进行配置到自己的个人博客了。

小鹿给大家找了一个主题链接可以选择自己喜欢的主题:更多主题

配置主题

打开 git-bash 切换到 blog -> themes 目录下,如果在目录 blog ->themes 右键选择启动 git-bash 就不用切换了。如果在桌面直接启动 git-bash ,可通过下边命令切换到 blog ->themes 目录下。

$ cd /blog/themes

选好一个主题,复制主题的 github 地址,通过 git 命令进行下载。(例:https://github.com/iissnan/hexo-theme-next 为一个主题的 github 地址)

git clone https://github.com/iissnan/hexo-theme-next

下载完之后我将文件夹改成 next了(也可以不改,我为了名字简洁点)。

next.png

然后在修改 /blog/config.yml 文件,将其中的 theme 改成 next。(这个是改变主题的地方,如果你用的是其他的主题,将这个 next 改成你下载下来的主题的文件夹的名称)

修改next.png

重新运行以下命令,查看更换主题后的效果 :

$ hexo generate
$ hexo server

申请 Github 免费静态内容空间

注册 Github 账号

我们去 Github 的官网进行账号注册 ,注册完成之后我们根据官方文档进行配置 ,然后我们使用自己的账户创建一个 Repository (仓库)。
点击网站右上角的 + 号,选择 New Repository( 注意:创建仓库的名字要你的注册的用户名一致。其他默认,确定创建)。

创建仓库.png

创建.png

之后你的静态内容空间就已经创建好了,在浏览器输入你的 your username(用户名).github.io 就可以访问了。

将 Hexo 上传 Github 上。

步骤一:安装 deployer-git (安装部署工具,方便以后更新)

$ npm install hexo-deployer-git --save

步骤二:在 /blog/_config.yml 中修改 deploy 属性(注意“:”之后有空格 ) 否则配置失败。

deploy:
  type: git
  repository: https://github.com/luxiangqiang/luxiangqiang.github.io.git
  branch: master

将上方的 Repository 换成你申请的 Git 仓库地址

github项目地址.png

使用 https 的方式部署每次提交到 Github 都要输入用户名和密码,如果嫌麻烦请使用 SSH 的方式,百度/谷歌自行搜索。
步骤三:初始化本地仓库。

git init

步骤四:连接远程仓库 ( 如果是第一次使用 git,在使用 git 的时候会提示输入用户名和密码,用户名是自己的注册邮箱。)

git remote add origin https://github.com/luxiangqiang/luxiangqiang.github.io.git

步骤五:发布 hexogithub page

//等于一次性执行了,清空、刷新、部署三个命令
hexo clean && hexo g && hexo d

步骤六:推送到远程仓库(github)

git push origin

这里建议创建一个新的分支 hexo,用于管理 hexo 文件。提交的的时候只提交 hexo 网站 html、css 等源文件。
创建并切换到新建分支:

git checkout -b hexo

将分支推送到远程仓库:

git push origin hexo

记得提交以后去 github 上把 hexo 分支设置默认,以后写文章等都要部署。 文章在 hexo 目录下的 \source\ _posts 文件夹中,是 md 格式,也就是 Markdown 格式。

转载请说明出处:
简书:https://www.jianshu.com/p/8e9000cc1015
个人博客:小鹿的博客

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