文档章节

免费个人博客搭建教程(详细-图文)--Hexo+OSChina

z77z
 z77z
发布于 2017/01/14 16:57
字数 2127
阅读 9538
收藏 381

本人作为一个屌丝程序员,年少无为,卖马为生,买不起服务器,买不起域名,但是又想拥有属于自己的博客网站,那就只有通过技术来实现这一切了。先上成果:点击,现在我把我自己搭建博客的过程共享出来,只要你按照步骤一步步走下去,一定会搭建成功,如果大家在搭建过程中遇到什么问题,欢迎在我的博客评论区留言,也欢迎大神进来,教我做码,带我装逼,带我飞。博客地址,JUST DO IT(离开舒适区)。

使用工具介绍

  1. 码云 Pages:码云 Pages 是一个免费的静态网页托管服务,您可以使用码云 Pages 托管博客、项目官网等静态网页。这样就不用购买服务器和域名了,如果您使用过 Github Pages 那么您会很快上手使用码云的Pages服务。这里使用码云上的Pages 而不是用Github Pages,主要原因就是在国内没有VPN的话。。。你懂得!还有就是支持国产!链接:https://git.oschina.net/

  2. HexoHexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。使用者只需要专注于写博客而不需要关注网站是如何生成的。而且还有丰富的博客主题可以选择!链接:https://hexo.io/zh-cn/(ps:这是国外网站,翻墙吧少年,需要自由门 翻墙软件可以在博客中联系我哦)

搭建环境

Node.js安装。

参考:http://www.runoob.com/nodejs/nodejs-install-setup.html(ps:如果没有VPN的用户最好切换一下npm的源,不然后续的步骤可能会让你想砸电脑,安装完后,在命令窗口执行下面代码)

npm config set registry http://registry.cnpmjs.org     #切换npm为淘宝镜像

Git安装。

参考http://www.runoob.com/git/git-install-setup.html

Hexo安装。( ps:安装完Node.js和Git之后不需要配置些什么,只需要安装成功就是了,如果想明白原理的话可以深入的学习。)

如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。打开命令窗口输入下面代码:

npm install -g hexo-cli

安装成功后输入hexo 如果得到下面这个结果,恭喜你!安装成功!

Hexo安装成功后效果

Hexo的常用命令说明:

参考:https://hexo.io/zh-cn/docs/commands.html

本地运行Hexo

安装 Hexo 完成后,请依次执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。将<folder> 替换成项目存放的文件夹目录,

hexo init <folder>
cd <folder>
npm install
hexo generate       

新建完成后,指定文件夹的目录如下:

.
├── .deploy       #需要部署的文件
├── node_modules  #Hexo插件
├── public        #生成的静态网页文件
├── scaffolds     #模板
├── source        #博客正文和其他源文件, 404 favicon CNAME 等都应该放在这里
|   ├── _drafts   #草稿
|   └── _posts    #文章
├── themes        #主题
├── _config.yml   #全局配置文件
└── package.json

进行到这步后就可以先在本地运行下,看看效果了。执行下面命令:

cd <folder>         #切换到项目目录下
npm install   		#install before start blogging
hexo server         #运行本地服务

浏览器输入http://localhost:4000就可以看到效果。如下:

默认配置运行效果

修改Hexo的主题

当然,上面运行的只是Hexo官方默认的主题配置效果,想要个性一点?,下面我们就将他改造成自己想要的个性主题。

Hexo的主题都是一些前端民间高手写的模版,可以在官方收录的主题中去挑选:https://hexo.io/themes/

看上一个主题后点击下图位置,进入下载主题文件。如下图:

主题下载完成后,将主题文件解压到Hexo项目的thems文件夹下面(ps:我这里的项目目录是在桌面的Hexo文件夹里面。)

接下来就是修改Hexo的配置文件_config.yml,将里面theme 对应的值改为之前下载的主题的文件夹名字,本文里面下载的主题文件夹名字为hexo-theme-smackdown-master

修改前

修改前

修改后

修改后

注意:这里“:”后面必须要有一个空格,而且这个空格要在英文输入法下,不然会报一些稀奇古怪的错。

按照之前步骤本地重新运行后,如下图:

改变主题后效果

关于Hexo中_config.yml 文件的其他配置,大家可以参考官方的文档,这里就不多赘述了:

文档链接 https://hexo.io/zh-cn/docs/configuration.html

下载的每个主题中,有一个配置文件,名字也叫_config.yml,这里大家千万不要和之前Hexo根目录下的_config.yml搞混淆了,这里面配置的主要是些与主题相关的东西,比如一些文章阅读量,多说插件,cnzz站长工具等等的配置信息。一般里面也都有注释,这里就不赘述了,不懂得可以在我的博客问我。

一些主题在GitHub上面也都有主题安装的一些文档,写的都很详细。推荐一个主题的文档,结合官方的文档看完之后,基本上也就明白了。

推荐一个主题的文档https://github.com/yscoder/hexo-theme-indigo/wiki

编写博客文章

如果你使用过MarkDown 来写博客文章的话,接下来就简单多了,没使用过也没关系,推荐大家一个编辑工具马克飞象 链接:https://maxiang.io/,在编辑器里面写好文章后,复制或另存为.md文件, 与普通的.md文件不同 要在文件开头添加下面代码

title: #文章标题
date: #文章日期
tags: #文章标签
categories: #文章分类
---

在.md文件的开头添加上面代码,是为了让Hexo框架在生成网页的时候,设置相应的参数。例如下图所示:

将写好的.md文件放入Hexo项目的source 目录下的_posts 文件夹中,可以看到里面有个hello-world.md 文件,这就是默认的文章。

重新在本地启动项目,访问就可以看到之前添加的文章。

生成静态Html文件

现在只能在本地启动项目然后通过本地地址访问博客网站,下面我们就可以利用Hexo生成静态Html,很简单,只需要在命令窗口执行下面代码:

cd <folder>         #切换到项目目录下
hexo generate       #生成静态文件到项目根目录的public文件夹中

发布静态Html文件到码云 Pages上

注册一个码云帐号,并创建一个项目。如下图:

创建完项目后得到项目的Https的地址后面要用。地址获取如下图

这里借用一个插件来帮助我们完成代码上传的工作,安装 hexo-deployer-git。安装代码如下:

npm install hexo-deployer-git --save        #把public里面生成的文件推上到码云上。


配置项目根目录_config.yml 文件,修改deploy 的值,如下图:

修改前

修改前

修改后,注意repo 的地址是之前在码云上面创建醒目后获取的地址。

修改后

修改完后在命令窗口执行下面命令:

cd <folder>         #切换到项目目录下
hexo deploy         #一键部署功能

之后会弹出一个对话框,输入码云的帐号密码。

部署成功之后,登录码云,查看之前创建的项目中出现了本地项目中public 文件夹中的文件,这时候代表之前的部署是成功的。

然后如下图,启动码云的pages功能:

访问链接:

这时候就看到之前和本地启动一样的效果了。博客部署完成,在这之后,只需要每次用马克飞象写好文章后,放入Hexo项目的source 目录下的_posts 文件夹中,在按照之前步骤更新博客就OK了。还可以随时切换博客的主题哦!

© 著作权归作者所有

z77z

z77z

粉丝 129
博文 17
码字总数 32226
作品 0
成都
程序员
私信 提问
加载中

评论(145)

绝地孤狼
楼主,搭建成功后访问没有样式怎么破
绝地孤狼
楼主 我在执行hexo deploy的时候抱这个错了,怎么解决啊
Run

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got 'issuser@ISS110002005810.(non
)
error: src refspec HEAD does not match any.
error: failed to push some refs to 'https://gitee.com/ndynMo/blog.git'
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io
cs/troubleshooting.html
Error: error: src refspec HEAD does not match any.
error: failed to push some refs to 'https://gitee.com/ndynMo/blog.git'
z77z
z77z 博主

引用来自“王伯陵”的评论

引用来自“邹海清”的评论

引用来自“王伯陵”的评论

楼主,我还有个问题想问一下。这个个人博客怎么绑定域名啊?

回复@王伯陵 : 开启码云pages功能就行
已经开启,域名的CNAME是www的,指向xxx.oschina.io。A指向xxx.oschina.io的ip。但是不行。求解。

回复@王伯陵 : 如果要用自己的域名的话,码云不支持,github可以
z77z
z77z 博主

引用来自“王伯陵”的评论

引用来自“邹海清”的评论

引用来自“王伯陵”的评论

楼主,我还有个问题想问一下。这个个人博客怎么绑定域名啊?

回复@王伯陵 : 开启码云pages功能就行
已经开启,域名的CNAME是www的,指向xxx.oschina.io。A指向xxx.oschina.io的ip。但是不行。求解。

回复@王伯陵 : 不能绑定自己的域名 只能用oschina的 要绑定自己的域名用github吧
王伯陵
王伯陵

引用来自“邹海清”的评论

引用来自“王伯陵”的评论

楼主,我还有个问题想问一下。这个个人博客怎么绑定域名啊?

回复@王伯陵 : 开启码云pages功能就行
已经开启,域名的CNAME是www的,指向xxx.oschina.io。A指向xxx.oschina.io的ip。但是不行。求解。
z77z
z77z 博主

引用来自“王伯陵”的评论

楼主,我还有个问题想问一下。这个个人博客怎么绑定域名啊?

回复@王伯陵 : 开启码云pages功能就行
王伯陵
王伯陵
楼主,我还有个问题想问一下。这个个人博客怎么绑定域名啊?
王伯陵
王伯陵

引用来自“邹海清”的评论

引用来自“王伯陵”的评论

fatal: could not read Username for 'https://git.oschina.net': No error
楼主,这是为啥呀。我用的是GitBash

回复@王伯陵 : 用户名和密码输入错误撒
楼主,问题解决了。
deploy:
type: git
repo: https://yourname:password@git.oschina.net/xxx/xxx.git
branch: master
也就是说在超链接里面要带用户名和密码
王伯陵
王伯陵

引用来自“邹海清”的评论

引用来自“王伯陵”的评论

fatal: could not read Username for 'https://git.oschina.net': No error
楼主,这是为啥呀。我用的是GitBash

回复@王伯陵 : 用户名和密码输入错误撒
楼主?
王伯陵
王伯陵

引用来自“邹海清”的评论

引用来自“王伯陵”的评论

fatal: could not read Username for 'https://git.oschina.net': No error
楼主,这是为啥呀。我用的是GitBash

回复@王伯陵 : 用户名和密码输入错误撒
这个就没有弹框要求输入用户名和密码,直接报错
超详细hadoop发行版安装教程(附图文步骤)

在前几篇的文章中分别就虚拟系统安装、LINUX系统安装以及hadoop运行服务器的设置等内容写了详细的操作教程,本篇分享的是hadoop的下载安装步骤。在此之前有必要做一个简单的说明:分享的所有...

左手的倒影
2018/08/03
74
0
搭建自己的个性博客平台

每次百度问题看到别人的个性博客,都纳闷是怎么来的,本教程教你搭建一个自己的个性博客平台。采用当前流行的博客开源框架hexo+oschina,别问为啥不用github~~~支持国产,哈哈哈 1、准备工作...

梦想修补师
2017/10/25
0
0
最新hadoop下载安装教程(附详细图文步骤)

在前几篇的文章中分别就虚拟系统安装、LINUX系统安装以及hadoop运行服务器的设置等内容写了详细的操作教程,本篇分享的是hadoop的下载安装步骤。 在此之前有必要做一个简单的说明:分享的所有...

adnb34g
2018/08/03
0
0
最新hadoop新手入门教程汇总

关于hadoop的分享此前一直都是零零散散的想到什么就写什么,整体写的比较乱吧。最近可能还算好的吧,毕竟花了两周的时间详细的写完的了hadoop从规划到环境安装配置等全部内容。写过程不是很难...

adnb34g
2018/08/06
0
0
hadoop实操篇:hadoop基础教程汇总

关于hadoop的分享此前一直都是零零散散的想到什么就写什么,整体写的比较乱吧。最近可能还算好的吧,毕竟花了两周的时间详细的写完的了hadoop从规划到环境安装配置等全部内容。写过程不是很难...

左手的倒影
2018/08/06
38
0

没有更多内容

加载失败,请刷新页面

加载更多

面试题必备-web页面基础

html标签是由<>包围的关键词 html标签是成对出现的 有部分标签是没有结束标签的,叫单标签, 页面中所有的内容,都是要放在HTML标签中的 HTML标签分三部分: 标签名称 标签内容 标签属性 HT...

达达前端小酒馆
今天
11
0
OSChina 周二乱弹 —— 女装大佬被拆穿是妹子假扮

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《All of the Stars》- Ed Sheeran 《All of the Stars》- Ed Sheeran 手机党少年们想听歌,请使劲儿戳(这里) @Leon_swool ...

小小编辑
今天
688
8
3. 彤哥说netty系列之Java BIO NIO AIO进化史

你好,我是彤哥,本篇是netty系列的第三篇。 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识。 简介 上一章我们介绍了IO的五种模型,实际上Java只支持其中的三种,即BIO/NIO/AIO。 本...

彤哥读源码
今天
48
0
02.日志系统:一条SQL更新语句是如何执行的?

我们还是从一个表的一条更新语句说起,我们创建下面一张表: create table T(ID int primary key, c int); 如果要将ID=2这一行c的值加1,SQL可以这么写: update T set c=c+1 where ID=2; 前...

scgaopan
今天
12
0
【五分钟系列】掌握vscode调试技巧

调试前端js 准备一个前端项目 index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1......

aoping
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部