更好的版面阅读,请访问:我的博客
这已经不是第一次倒腾 hexo + guihub 搭建 blog 了,最开始应该是去年6月份,可是那会家里的网络实在是太差了,加上很多 js 啊 node 什么的都不懂,按照别人的教程一步一个脚印好像也没有搭载成功,后来就不想搞了,再后来,就是忘记了。直到前段时间学习了javascript 和 node ,巧逢昨天在Android 博客周刊看到一哥们的博客正是 采用 hexo + github 的方式搭建的,加上电脑的平台已经安装了git 和 node 的环境,然后,然后,就又有了搭建博客的强烈欲望了,然后的然后,打开了 git bash ,敲入了如下命令:
mkdir blog
cd blog
npm install -g hexo
hexo init xiaowen
cd xiaowen
hexo g
hexo s
于是就有了这个...
下面呢一步一步来详细说明
需要的工具
工欲善其事,必先利其器,需要的一些工具和平台,如果已经有这些了,可以跳过这部分。
git(必须)
为什么需要 git ? 因为我们后面需要将本地的博客上传到github。还有一个就是:我的本地是 win10平台,本地的cmd不好用,需要安装git来使用git提供的git bash的命令操作,git bash可以执行一些linux的命令,而我最近用linux命令操作比较多,比较熟悉,所以需要这个(其实是工作天天用)。当然你如果是 ubuntu 或者 其他的工具平台也行。能执行命令即可,看个人需要。git下载地址: https://git-scm.com/downloads
node.js
这个不需要多说什么了,也是一个必备的工具,下载地址: https://nodejs.org/en/ 。
如果不会安装的朋友可以参考下这个博客 : http://www.cnblogs.com/zhouyu2017/p/6485265.html
hexo 的安装
git 和 node 安装完成后,就需要安装主角了,那就是 hexo 。打开你的桌面,右键单击会出现 Git Base Here
和 Git Gui Here
,选择第一个 Git Base Here
就可以了,就可以输入命令行了。如下图
这个窗口是可以设置和调整的,在窗口里面右键会出来设置的菜单,点击option
即可。如果实在不会设置的,可以联系我!下面可以执行命令安装了
npm install -g hexo --->执行这个命令出错或者有其他的问题时,可能是被墙的原因,可以安装淘宝的npm镜像,执行如下命令安装
npm install -g cnpm --registry=https://registry.npm.taobao.org --->参考:https://npm.taobao.org/ ,执行完了这个命令后,就可以执行下面的命令了
cnpm install -g hexo
注: 上面的命令如果执行出错才需要执行2和3的命令,否则执行1命令即可。
简单的验证下
走完了上面的步骤,应该是没有多大问题了,记得验证下 git 和 node 的安装是否完好,可以执行下面的命令验证下版本
git version ---> 这个是验证git版本的
node -v ---> 这个是验证node版本的
npm -v ---> 这个是验证npm包管理器的
hexo -v ---> 这个是验证hexo 的
经过上面的步骤,工具都已经安装完成了,下面可以开始创建本地博客啦!
本地博客
经过上面的工具操作,现在可以执行命令来创建博客了,主要的命令大约有一下几条
hexo init --->folder : 带这个参数说明是在当前创建一个这样博客的文件夹
hexo generate (hexo g 也可以)
hexo server (hexo s 也可以)
hexo clean --->清理缓存
hexo deploy (hexo d 也可以)--->部署上去
在你的D盘或者其他什么盘的目录底下,单击右键打开Git Base Here
,输入命令hexo init
,folder表示创建的文件夹,比如hexo init
,或者其他的什么都可以。静静的等待完成吧。
完成后,执行hexo g
生成静态网页。执行hexo s
运行服务,然后在浏览器输入http://localhost:4000/
你就可以看效果了。前提是执行前面两个命令没有出错。看到的效果应该是这样的
看到这样的效果你已经成功了。
so...下面应该干点啥了呢?
我的第一反应是:换个好看点的主题或者背景,然后放上一两篇文章看看效果,满意后呢部署到github上去,让别人也可以访问看看,哈哈
换主题
先不管其他的什么设置先,换个主题看看效果再说,主题的网站。这么多的主题,总会有一款心仪的。我使用的主题是next : http://theme-next.iissnan.com/
建议你还是先跟我一样用这个主题吧,把流程走完熟悉了后你可以再设置你所需要的主题或者其他的。
回到根目录(是指你创建这个项目的目录),先把主题clone下来,执行如下命令:
git clone https://github.com/iissnan/hexo-theme-next themes/next
clone 完成后,你会在目录themes
下看到一个文件夹next
,这时候说明已经clone下来了。然后就是这个启用主题了。打开根目录下的_config.yml
文件(建议你用notepad ++ 打开或者 atom 编辑器 或者 Visual Studio Code 编辑器 或者 sublime text 编辑器),找到如下的信息:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
把theme: landscape
改为theme: next
,保存,然后执行命令:
hexo g
hexo s
看到如下效果说明主题切换成功了
这个主题有四种样式(这个文件在themes\next
底下的_config.yml
),分别如下:
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
你可以分别选择看看那种是你想要的,保存后,还需要执行命令:hexo g
和 hexo s
刷新下页面就可以看到样式了。
看到了新样式,估计你也会是很迫切的想要设置页面的各种东西了吧,那么现在你看看这个样式的文档吧,就不详细介绍了:http://theme-next.iissnan.com/theme-settings.html。
新建文章
看了新样式,很期待应该怎样写文章吧?
在目录source\_posts
下有一个hello world.md
的文件,这个就是你看到的博客第一篇文章。那么应该要怎样创建文章呢?执行如下命令:
hexo new hexo博客 --->“hexo博客” 这个是你的文章名称
编辑这个文件就是编辑你的文章了,对于不认识md文件或者语法的,参考: http://www.appinn.com/markdown/
编辑完了后,保存,依然要执行命令:hexo g
和 hexo s
,然后你就可以看到文章的内容了。
删除文章的方式是直接删除那个.md文件,然后执行hexo clean
添加主页tags菜单
在刚刚的新建文章的命令中,其实是隐含了一个参数 layout
,这个参数的默认值是post
,所以你看到新建的文章是在目录_post
里面的。
例子:添加一个标签的菜单按钮
在样式文件夹下的配置文件中设置
在文件themes\next\_config.yml
中有如下信息:
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
menu:
home: / || home
#tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
#about: /about/ || user
# Enable/Disable menu icons.
menu_icons:
enable: true
你有没有发现,点击浏览器上面的归档,网址后面有一个archives
,其实就是在这里设置的。
现在要新加一个tags的菜单,那么就需要把上面的tags
那行注释去掉。
命令行添加
注释了以后,执行命令:
hexo new page tags --->注意的是:这个命令是在根目录底下执行的
执行完了以后,进入source
文件夹,你会发现多了一个tags
的文件夹,再进入,打开index.md
,在文件里面随便输入点东西,保存,执行hexo g
和 hexo s
,你就看到一个标签
的菜单选项了,点击后,页面跳转显示的内容就是你刚刚输入的内容。
添加了菜单的item,怎样才使文章有标签呢?
在文章里面添加标签
需要在文章里面添加标签,在每篇文章的开头都会有如下的信息:
title:
date:
tags:
只要我们在tags里面添加就行,比如tags: [andoid html]
在首页添加‘阅读全文’
主要有三种方式:
在文章中使用 `` 手动进行截断,Hexo 提供的方式。--->推荐方式
在文章的 front-matter 中添加 description,并提供文章摘录
自动形成摘要
auto_excerpt:
enable: true
length: 150
添加头像信息
你有没有发现,在网页tab上面会有一个N
的图片?怎么替换成自己想要的图片呢?
到public\images
下面,将你的图片替换favicon-16x16-next.png 和 favicon-32x32-next.png
,同时制作一个svg
,不会做的同学参考:https://c.runoob.com/more/svgeditor/
,命名为logo.svg
,同时替换public\images
下的logo.svg
部署到github
前提:有github的帐号。如果没有,先到github注册一个:https://github.com/
建仓库
设置仓库信息
新建仓库后,点击右侧的设置,往下拉,找到GitHub Pages设置你的域名信息,一般有自己域名的就需要设置,不然是不需要的,前提是创建的仓库是:github用户名.github.io。如果不是的,重新再建仓库吧。然后你就会看到如下这个:Your site is published at [http://github用户名.github.io](github用户名.github.io)
,点击这个域名跳转到了你的博客了。如果想设置个性域名的话,留意下篇介绍。下面会教你怎样将你本地的博客上传到你的github,然后进行展示。
配置远程仓库信息
打开根目录的文件vim _config.yml
,按照下面的信息进行配置
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/xiaowen2013/xiaowen2013.github.io.git ---> 远程仓库地址
branch: master ---> 分支
部署到远程仓库
到了这一步,也就是执行命令的事情了
npm install hexo-deployer-git --save --->连接远程仓库,如果是第一次,会弹出窗口输入github 的帐号和邮箱
或者 cnpm install hexo-deployer-git --save
hexo deploy --->这是部署的,执行完这个就可以看效果了
验证
这个操作很简单,浏览器输入http://yourname.github.io/
,yourname
-->你的账户名
最后,恭喜,搭建完成
每次部署的操作流程
hexo clean
hexo generate
hexo deploy
本地操作预览的流程
hexo g
hexo s
然后输入:http://localhost:4000
文档参考
说千道万,不如参考官方的设置,多看看文档,如果说要想搭建的更好,还是需要多学点其他东西。
hexo : https://hexo.io/zh-cn/api/index.html
next 主题 : http://theme-next.iissnan.com/
最后:下一篇教你打造更好看的博客和建立属于自己的专属域名。