利用Hexo+github简单搭建一个blog

发现Github这个网站大概是在一年前了,由于某些原因,在课题开展的过程中或多或少的会需要用到一些用的计算机相关知识,偶然间发现Github这个网站,上面分享了非常多实用的,有趣的工具,刚开始觉得特别的炫酷(现在也是),后来就花了很短时间慢慢研究了一下,估摸着还算不上浅尝辄止,直到昨天晚上在看些大牛的博客的时候才突然来了兴致想要搭建一个自己的网站,于是顺理成章地想起Github。Github的功能和特色在此不再赘述,写这篇文章也主要是记录一下耗时近七八个小时的学习过程。如果它能对后来的人有什么启示,那就更有意义了。

注:文章部分内容转自网络,链接在文章最后,感谢作者无私分享,过程中同样得到了师兄的帮助。

##基本步骤
1.注册github账号,新建一个仓库
2.安装、配置Hexo
3.安装、配置git
4.发布文章
5.选择主题

##1.注册github账号,新建仓库
进入https://github.com/,在下图的框中,分别输入自己的用户名,邮箱,密码。

这些都比较简单,没有遇到任何阻碍。
接着就是创建仓库,如图所示,也比较简单。

##2.安装Hexo
配置Node.js环境
下载Node.js安装文件:
Windows Installer 32-bit
Windows Installer 64-bit
根据自己的Windows版本选择相应的安装文件,要是不知道,就安装32-bit的吧- -。
保持默认设置即可,一路Next,安装很快就结束了。 然后我们检查一下是不是要求的组件都安装好了,同时按下Win和R,打开运行窗口:
在新打开的窗口中输入cmd,敲击回车,打开命令行界面。(下文将直接用打开命令行来表示以上操作,记住哦~) 在打开的命令行界面中,输入
node -v
npm -v

配置Git环境

下载Git安装文件:
GIt官网下载地址:
Git-2.6.3-64-bit.exe
然后就进入了Git的安装界面,
和Node.js一样,大部分设置都只需要保持默认,但是出于我们操作方便考虑,建议PATH选项按照下图选择:

Git PATH设置

一样的,我们来检查一下Git是不是安装正确了,打开命令行,输入:
git –version
在E盘目录下创建Hexo文件夹(在哪个盘无特殊要求),并在命令行的窗口进入到该目录
在命令行中输入:
npm install hexo-cli -g
可能你会看到一个WARN,但是不用担心,这不会影响你的正常使用。 然后输入
npm install hexo –save
然后你会看到命令行窗口刷了一大堆白字,下面我们来看一看Hexo是不是已经安装好了。 在命令行中输入:
hexo -v
如果你看到了如图文字,则说明已经安装成功了。

初始化Hexo
接着上面的操作,输入:
hexo init
然后输入:
npm install
之后npm将会自动安装你需要的组件,只需要等待npm操作即可。
注意:这个步骤需要空文件夹,所以你需要在此之间新建一个文件夹,位置暂时没发现有什么特殊要求

首次体验Hexo
继续操作,同样是在命令行中,输入:
hexo g
然后输入:
hexo s
然后会提示:
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
在浏览器中打开http://localhost:4000/,你将会看到配置完成以后页面
到目前为止,Hexo在本地的配置已经全都结束了。

下面会讲解怎样将Hexo与github page 联系起来

##3.连接本地git和Github

1、设置Git的user name和email:(如果是第一次的话)

git config –global user.name “xujun”
git config –global user.email “gdutxiaoxu@163.com
2、生成密钥
ssh-keygen -t rsa -C “gdutxiaoxu@163.com
一直按Enter键就好了,最终生成密钥文件具体路径在~/.ssh中,打开文件复制其中的key到下图中
配置Deployment
同样在_config.yml文件中,找到Deployment,然后按照如下修改:
deploy:
type: git
repo: git@github.com:yourname/yourname.github.io.git
branch: master
比如我的仓库的地址是git@github.com:gdutxiaoxu/gdutxiaoxu.github.io.git,所以配置如下
deploy:
type: git
repo: git@github.com:gdutxiaoxu/gdutxiaoxu.github.io.git
branch: master

注意:此处冒号(:)后必须要有空格,不然就会报错了

写博客、发布文章

新建一篇博客,执行下面的命令:

hexo new post “article title”

这时候在我的 电脑的目录下 F:\hexo\source\ _posts 将会看到 article title.md 文件
用MarDown编辑器打开就可以编辑文章了。文章编辑好之后,运行生成、部署命令:

hexo g // 生成
hexo d // 部署
当然你也可以执行下面的命令,相当于上面两条命令的效果
hexo d -g #在部署前先生成
部署成功后访问 你的地址,https://yourName.github.io(这里输入我的地址: https://gdutxiao.github.io ),将可以看到生成的文章。

踩坑提醒

1)注意需要提前安装一个扩展:
npm install hexo-deployer-git –save

##4.主题选择
1)安装 NexT
Hexo 安装主题的方式非常简单,只需要将主题文件拷贝至站点目录的 themes 目录下, 然后修改下配置文件即可。具体到 NexT 来说,安装步骤如下。

下载主题

如果你熟悉 Git, 建议你使用 克隆最新版本 的方式,之后的更新可以通过 git pull 来快速更新, 而不用再次下载压缩包替换。

克隆最新版本
下载稳定版本
在终端窗口下,定位到 Hexo 站点目录下。使用 Git checkout 代码:

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

2)启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next。

启用 NexT 主题

theme: next
到此,NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前, 我们最好使用 hexo clean 来清除 Hexo 的缓存。

3)验证主题

首先启动 Hexo 本地站点,并开启调试模式(即加上 –debug),整个命令是 hexo s –debug。 在服务启动的过程,注意观察命令行输出是否有任何异常信息,如果你碰到问题,这些信息将帮助他人更好的定位错误。 当命令行输出中提示出:

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
此时即可使用浏览器访问 http://localhost:4000 ,检查站点是否正确运行。

现在,你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定,包括个性化以及集成第三方服务。

参考:手把手教你用Hexo+Github 搭建属于自己的博客(http://blog.csdn.net/gdutxiaoxu/article/details/53576018)

Share (本文总阅读量 次)