使用Hexo+OSChina+git搭建自己的博客网站

高效工具

2017-07-05

224

1

基础工具介绍

码云Pages

码云 Pages 是一个免费的静态网页托管服务,您可以使用码云 Pages 托管博客、项目官网等静态网页。如果您使用过 Github Pages 那么您会很快上手使用码云的Pages服务。

官方介绍:http://www.oschina.net/news/73980/gitosc-pages

Hexo

Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架,可以方便的生成静态网页托管在github和Heroku上,引用Hexo作者 [@tommy351] 的话:

快速、简单且功能强大的 Node.js 博客框架。A fast, simple & powerful blog framework, powered by Node.js.

官网地址:https://hexo.io

git

Git是一个开源的分布式版本控制系统,用以有效、高速的处理从很小到非常大的项目版本管理。

官网地址:https://git-scm.com

搭建环境

码云Pages使用

这里使用开源中国码云,没有使用github(你懂的,支持下国内软件),没有开源中国码云的小伙伴赶紧注册了。具体可以参见 :官网 的介绍以及使用,这里就不在啰里啰嗦的介绍了。

因为我想以根目录访问网站,所以我创建了一个这样子的项目:

https://git.oschina.net/zhengweishan/zhengweishan.

启动码云Pages,就可以访问了,访问地址:

http://zhengweishan.oschina.io/

官方说明如下:

*如果你想以根目录的形式访问自己的静态网站,只需要建立一个与自己个性地址同名的项目即可,如http://git.oschina.net/ipvb 这个用户,想要创建一个自己的站点,但不想以子目录的方式访问,想以ipvb.oschina.io 直接访问,那么他就可以创建一个名字为ipvb的项目http://git.oschina.net/ipvb/ipvb部署完成后,就可以以http://ipvb.oschina.io 进行访问了。 *

git安装

请参考http://www.runoob.com/git/git-install-setup.html,这里就不在累赘的介绍了。

Node.js安装

请参考http://www.runoob.com/nodejs/nodejs-install-setup.html,这里就不在累赘的介绍了。可能有人会问:为什么要安装Node.js?很简单嘛,我们的Hexo是基于Node的一个静态博客框架嘛。

Hexo安装

  • 安装

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

    npm install hexo-cli -g

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

    Hexo常用命令请参考:https://hexo.io/zh-cn/docs/commands.html

  • 本地运行

    安装 Hexo 完成后,Hexo 将会在指定文件夹中新建所需要的文件。这里本地先新建了与博客地址一样的文件夹:
    zhengweishan.oschina.io.然后请进入你创建的改文件夹的上级目录,在该目录下打开命令行窗口,依次执行下列命令:

    1. hexo init zhengweishan.oschina.io
    2. cd zhengweishan.oschina.io
    3. npm install #install before start blogging
    4. hexo generate #生成静态文件到项目根目录的public文件夹中

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

      .

      ├── .deploy #需要部署的文件

      ├── node_modules #Hexo插件

      ├── public #生成的静态网页文件

      ├── scaffolds #模板

      ├── source #博客正文和其他源文件, 404 favicon CNAME 等都应该放在这里

      | ├── _drafts #草稿

      | └── _posts #文章

      ├── themes #主题

      ├── _config.yml #全局配置文件

      └── package.json

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

    5. cd zhengweishan.oschina.io

    6. npm install #install before start blogging
    7. hexo server #运行本地服务

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

  • 远程发布

    注册一个码云帐号,并创建一个项目,这里使用已经创建好的项目https://git.oschina.net/zhengweishan/zhengweishan,然后获取git地址:https://git.oschina.net/zhengweishan/zhengweishan.git

    这里使用git将项目中public文件夹下的文件管理起来,并推送到码云上。借用一个插件来帮助我们完成,安装 hexo-deployer-git。安装代码如下:
    npm install hexo-deployer-git --save
    配置项目根目录_config.yml 文件,修改deploy的值,如下图:

    参考:https://hexo.io/docs/deployment.html

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

    1. cd zhengweishan.oschina.io
    2. npm install #install before start blogging
    3. hexo deploy #一键部署功能

      之后会弹出一个对话框,输入码云的帐号密码。大家最后在安装好git以后配置一个全局的文件,这样就可以不用每次提交都输入账号密码了。

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

      最后启动码云的Pages功能,详细参看:http://www.oschina.net/news/73980/gitosc-pages

      启动之后如下图,

      然后浏览器输入生成的网址就可以访问了,如下图所示:

看到之前和本地启动一样的效果了,这样子博客网站就部署完成了。

打赏一个呗~~

关注我
长按二维码可识别关注
微信号:xwintop
微信号xwintop


追风

爱一个人就像执着于一种梦想,没有值不值得,只有愿不愿意···

关注我
长按二维码可识别关注
微信号:xwintop
微信号xwintop


关注我
长按二维码可识别关注
微信号:xwintop
微信号xwintop