基于Hexo+Node.js+github+coding搭建个人博客——基础篇
附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/
搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My Blog Trip — Power By Hexo
记录一下搭建的基本过程以及遇到的一些问题,仅供参考
= =废话不多说,进入主题
以下提到的站点配置文件指的是博客文件根目录下的 _config.yml
,主题配置文件是主题文件夹下的 _config.yml
,童鞋们不要混淆了
安装Node.js
Node.js的安装有很多种方式,Hexo的官方文档 建议是用nvm 安装,但好多人都说不行,所以找了另外两种方式安装
windows的童鞋可参考安装Node.js
方法一:二进制包直接解压配置
在node.js的官网 下载二进制包来安装的,下载过后,解压,设置软链接,要不然每次都执行命令都要加上路径,好麻烦
ln -s /home/ybd/Data/soft/application/node-v6.2.0-linux-x64/bin/node /usr/local/bin/node
ln -s /home/ybd/Data/soft/application/node-v6.2.0-linux-x64/bin/npm /usr/local/bin/npm
注意!源文件要写绝对路径,否则会报错:链接层数过多。也可以直接将node可执行文件拷贝到 /usr/local/bin
目录下。
接下来就可以查看是否成功配置了
node -version
npm -version
方法二:源文件编译安装
在安装前,首先需要配置安g++编译器
sudo apt-get install build-essential
去官网 下载源代码,选择最后一项,Source Code
解压到某一目录,然后进入此目录,依次执行以下3条命令
./configure
make
sudo make install
执行以下命令,检测是否已经装好node.js
node -v
npm安装,一条命令即可解决
curl http://npmjs.org/install.sh | sudo sh
博主安装Node.js遇到的问题就是多次安装了不同版本的Node.js,有的是安装在用户变量上,有的是系统变量,所以每次用的时候都要切换到root用户,就算赋权 sudo chmod 777 file
都没有用,所以折腾了很久才把Node.js完全卸载,再重新安装
安装Git
Ubuntu系统下安装Git非常简单,只需一条命令:
sudo apt-get install git
windows下就直接到Git官网 下载安装即可
然后终端执行 git --version
查看是否安装成功
安装Hexo
什么是 Hexo?Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
- 所有以上必备的应用程序安装完成后,无论是在哪个操作系统,之后的操作都一样
安装Hexo的非常简单,只要一条命令,前提是安装好Node.js与Git
npm install -g hexo-cli
- 如果npm安装hexo失败,则很有可能是权限问题,或者npm与node的版本不兼容(很少出现)
如果顺利安装完成,理论上Hexo已经安装完成,但在Ubuntu系统中,比较坑的地方就是 hexo
命令居然放在了Node.js安装目录的 bin
文件夹下,不能快捷地在终端把命令敲出来,所以还是老规矩,软链接走起
sudo ln -s /home/ybd/data/application/node-v7.4.0-linux-x64/bin/hexo /usr/local/bin/hexo
到此,Hexo的安装已基本完成,可以先试一下Hello World。
本地启动Hello World与Hexo简单使用
初始化
随便建一个文件夹,名字随便取,博主取其名为blog,cd
到文件夹里,先安装必要的文件,执行以下命令:
hexo init # hexo会在目标文件夹建立网站所需要的所有文件
npm install # 安装依赖包
本地启动
有了必要的各种配置文件之后就可以在本地预览效果了
hexo g # 等同于hexo generate,生成静态文件
hexo s # 等同于hexo server,在本地服务器运行
之后打开浏览器并输入IP地址 http://localhost:4000/
查看,效果如下
新建文章与页面
hexo new "title" # 生成新文章:\source\_posts\title.md
hexo new page "title" # 生成新的页面,后面可在主题配置文件中配置页面
- 生成文章或页面的模板放在博客文件夹根目录下的
scaffolds/
文件夹里面,文章对应的是post.md
,页面对应的是page.md
,草稿的是draft.md
编辑文章
打开新建的文章\source\_posts\postName.md
,其中postName
是hexo new "title"
中的title
title: Start My Blog Trip — Power By Hexo # 文章页面上的显示名称,可以任意修改,不会出现在URL中
date: 2017-01-10 23:49:28 # 文章生成时间,一般不改
categories: diary # 文章分类目录,多个分类使用[a,b,c]这种格式
tags: [Hexo,diary] # 文章标签
---
#这里开始使用markdown格式输入你的正文。
<!--more-->
#more标签以下的内容要点击“阅读全文”才能看见
插入图片
插入图片有三种方式
方式一
在博客根目录的 source
文件夹下新建一个 img
文件夹专门存放图片,在博文中引用的图片路径为 /img/图片名.后缀
![](图片路径)
- 1
- 1
方式二
对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo也提供了更组织化的方式来管理资源,将站点配置文件中的 post_asset_folder
选项设为 true
来打开文章资源文件夹
post_asset_folder: true
然后再博文中通过相对路径引用
{% asset_img 图片文件名 %}
方式三
使用七牛云储存,因为Github跟Coding项目容量有限,而且Github的主机在国外,访问速度较慢,把图片放在国内的图床上是个更好的选择,免费用户实名审核之后,新建空间,专门用来放置博客上引用的资源,进入空间后点击「内容管理」,再点击「上传」
上传完成之后点击关闭回到管理页面,选中刚上传的图片,最右边的操作点击复制链接即可
然后在博文中通过地址引用
![](图片地址如:http://ojoba1c98.bkt.clouddn.com/img/build-hexo/copyUrl.png)
简单的命令
总结一下简单的使用命令
hexo init [folder] # 初始化一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站
hexo new [layout] <title> # 新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来
hexo version # 查看版本
hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo g # 等于hexo generate # 生成静态文件
hexo s # 等于hexo server # 本地预览
hexo d # 等于hexo deploy # 部署,可与hexo g合并为 hexo d -g
安装主题(以NexT为例)
更多主题请看知乎专栏
复制主题
Hexo 安装主题的方式非常简单,只需要将主题文件拷贝至站点目录的 themes
目录下, 然后修改下配置文件即可
在这我们使用git克隆最新版
cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next
- 1
- 2
- 1
- 2
启用主题
打开站点配置文件, 找到 theme 字段,并将其值更改为 next
theme: next
然后 hexo s
即可预览主题效果
更换主题外观
NexT有三个外观,博主用的是 Muse
,直接更改主题配置文件的 scheme
参数即可,如果显示的是繁体中文,那么站点配置文件中的 language: zh-CN
scheme: Muse
#scheme: Mist
#scheme: Pisces
在次执行 hexo clean
和 heox s
可预览效果
大部分的设定都能在NexT的官方文档 里面找到,如侧栏、头像、打赏、评论等等,在此就不多讲了,照着文档走就行了,接下只是个性定制的问题
注册Github和Coding并分别创建Pages
在本地运行没有问题的话,那么可以部署到外网去,在此之前,先得有服务器让你的项目可以托管,那么Github Page与Coding Page就是个很好的东西,它们可以让我们访问静态文件,而Hexo生成的恰恰是静态文件
具体请查看 Coding Page 、 Github Page
那为什么要注册两个网站呢?因为Github是国外的服务器,访问速度比较慢,而Coding是国内的,速度相对来说比较快,在后面DNS解析的时候可以把国内的解析到Coding,国外的解析到Github,完美
GitHub
注册Github帐号
进入Github 首页进行注册,用户名、邮箱和密码之后都需要用到,自己记好,不知道怎么注册的童鞋去问问度娘
创建Repository(Github Pages)
Repository相当于一个仓库,用来放置你的代码文件。首先,登陆进入Github,选择首页中的 New repository
按钮
创建时,只需要填写Repository name即可,可以顺便创建README文件,就是红色那个钩,当然这个名字的格式必须为{user_name}.github.io,其中{user_name}必须与你的用户名一样,这是github pages的特殊命名规范,如下图请忽视红色警告,那是因为博主已经有了一个pages项目
Coding
注册Coding帐号
国内的网站,绝大部分都是中文的,注册什么的就不说了,进入Coding 滚键盘就是了= =
创建项目(Coding Pages)
Coding Pages请看 Coding Pages
注册之后进入主页,点击项目,点击+,项目名为你的用户名
查看Pages 服务是否开启:点击项目 -> 代码 -> Pages 服务,若没有开启则点开启
配置SSH与Git
那么我们有了两个免费的服务器之后,就要绑定个人电脑与它们联系,那就是SSH与Git
绑定之后我们每次部署项目就不用输入帐号和密码
生成SSH Key
ssh-keygen -t rsa -C your_email@youremail.com
后面的 your_email@youremail.com
改为你的邮箱,之后会要求确认路径和输入密码,我们这使用默认的一路回车就行。成功的话会在~/下生成 .ssh
文件夹,进去,打开 id_rsa.pub
,复制里面的key,粗暴点就是 Ctrl+a 然后 Ctrl+c
添加SSH Key
首先是Github,登录Github,右上角 头像 -> Settings
—> SSH nd GPG keys
—> New SSH key
。把公钥粘贴到key中,填好title并点击 Add SSH key
至于Coding,登录进入主页,点击 账户
—> SSH公钥
—> 输入key再点击 添加
验证成功与否
验证github
ssh -T git@github.com
如果是第一次的会提示是否continue,输入yes就会看到:You’ve successfully authenticated, but GitHub does not provide shell access 。这就表示已成功连上github!之前博主就是因为没有输入yes,导致几次失败,粗心地一路回车= =
验证coding
ssh -T git@git.coding.net
同上,按yes
接下来我们要做的就是把本地仓库传到github上去,在此之前还需要设置username和email,因为github每次commit都会记录他们
git config --global user.name your name
git config --global user.email your_email@youremail.com
关于git可参考:
史上最全github使用方法:github入门到精通
廖雪峰老师的Git教程
部署到Github与Coding
在此之前,先安装Git部署插件
npm install hexo-deployer-git --save
打开站点配置文件,拉到底部,修改部署配置:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: git@github.com:masteranthoneyd/masteranthoneyd.github.io.git,master
coding: git@git.coding.net:ookamiantd/ookamiantd.git,master
注意冒号后面是网站对应的用户名,接着就是/,然后再是你的项目名加上 .git,master
保存后终端执行
hexo clean
hexo g
hexo d
稍等片刻,可能会由于环境、网络等原因,部署的时间会有偏差,有的人快有的慢
部署完成后可在浏览器输入 yourName.github.io
或者 yourName.coding.me
都可以浏览到一个属于自己的博客了 ~
总结
最后用拙劣的语言总结一下博主搭建Hexo博客的体会,六个字:简洁但,不简单。
再六个字,正如NexT官方说的:精于心,简于形
= =貌似这个博客也不怎么简洁,有点花俏,装X嫌疑
但无论怎样,折腾这个博客让我受益匪浅,正如之前听到的一句名言,忘了谁说的:不努力试一把,又怎么会知道绝望…好像很有道理,绝望中寻找光芒,绝处逢生,感觉挺不错的
高级进阶篇:传送门
在次喂自己带盐!个人博客:http://www.ookamiantd.top
参考
使用Hexo搭建个人博客(基于hexo3.0)
Github Pages个人博客,从Octopress转向Hexo
Hexo 3.1.1 静态博客搭建指南
Hexo官方文档
NexT官方文档
基于Hexo+Node.js+github+coding搭建个人博客——基础篇的更多相关文章
- 使用Coding.net+Hexo+node.js+git来搭建个人博客
使用Coding.net来搭建基于Hexo的博客 一.准备工作 什么是Coding.net Coding可以说,就是国产的Github,但是,有一个功能使它似乎超越了GitHub-那就是 Web ID ...
- node.js&mongodb&express 搭建个人博客系统
源码参见于 https://github.com/njaulj/iliujun
- 基于 Hexo + GitHub Pages 搭建个人博客(一)
前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...
- 基于 Hexo + GitHub Pages 搭建个人博客(二)
在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...
- 基于 Hexo + GitHub Pages 搭建个人博客(三)
一.添加扫描二维码关注功能 打开 themes 目录下的 next 主题配置文件,找到 Wechat Subscriber 标签,将该标签下的配置改成如下形式: # Wechat Subscriber ...
- 基于Hexo且在GitHub上搭建博客
title: 基于Hexo且在GitHub上搭建博客 Welcome to Fofade's Blog! 搭建初衷 大大小小,大学两年,玩了很多,也学了很多. 回首望之,曾经不知道的,现在是知道了,但 ...
- HEXO与Github.io搭建个人博客
HEXO与Github.io搭建个人博客 HEXO搭建 HEXO是基于Node.JS的一款简单快速的博客框架,能够支持多线程,支持markdown,可以将生成的静态网页发布到github.io以 ...
- 使用Hexo + GitHub Pages 搭建个人博客
一.前言 之前是在CSDN上写博客的,但是无奈其广告满天飞,还有因为个人不太喜欢CSDN博客里的一些东西,加上看到很多技术大牛都有自己的个人博客,于是乎!便想着搭建一个自己的个人博客.其实之前写博客还 ...
- 利用Github和Hexo搭建独立的个人博客--基础篇
利用Github和Hexo搭建独立的个人博客--基础篇 摘要:本文主要参考了使用hexo和Github上创建自己的博客.如何搭建一个独立博客--简明Github Pages与Hexo教程和使用GitH ...
随机推荐
- Vue为v-html中标签添加CSS样式
在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: <template> <div class="msgHtmlBox" v-ht ...
- Redis在windows下的安装下载
1买个mac和台式电脑安装个Linux系统 2教程见:https://jingyan.baidu.com/article/0f5fb099045b056d8334ea97.html powerS ...
- js之close()方法
.close()方法只适用于通过window.open()打开的弹出窗口.对于浏览器的主窗口,如果没有得到用户允许是不能关闭的.不过,弹出窗口可以调用top.close()在不经用户允许的情况下关闭自 ...
- Win10系列:VC++调用自定义组件2
(2)C#调用WinRT组件 在解决方案资源管理器中右键点击解决方案图标,选择添加一个Visual C#的Windows应用商店的空白应用程序项目,并命名为FileCS.接着右键点击FileCS项目的 ...
- C++构造函数和析构函数,以及构造函数特殊成员变量和函数的初始化
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- Cracking The Coding Interview 9.1
//原文: // // You are given two sorted arrays, A and B, and A has a large enough buffer at the end to ...
- 深入理解java虚拟机---java虚拟机的发展史(四)
1.java虚拟机 A:java虚拟机有很多个版本,但是我们经常使用的是sun公司的HotSpot,可以通过以下命令获取java虚拟机版本 B:JAVA虚拟机分类: 1.Sun Class VM 2. ...
- 7.6 C++基本序列式容器效率比较
参考:http://www.weixueyuan.net/view/6403.html 总结: 对于vector而言,它只是一个可以伸缩长度的数组 对于deque而言,它是一个可以操作头部和尾部的并且 ...
- session和cokkie的区别与作用
session在计算机中,尤其是在网络应用中,称为“会话机制”,Session对象存储特定用户会话所需的属性及配置信息,这样,当用户在应用程序的web页之间跳转时,存储在session对象中的变量将不 ...
- div 自适应高度
自适应高度 ,设置最小高度:通常情况下,没有设置高度,div默认自适应高度且无最低高度 1 div{ _height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ...