当前位置

网站首页> 程序设计 > 开源项目 > 程序开发 > 浏览文章

hexo和github搭建个人博客 - gitFeng

作者:小梦 来源: 网络 时间: 2024-05-22 阅读:

hexo

1.1 安装

1.1.1 npm 镜像服务器设置

参考链接:https://cnodejs.org/topic/4f9904f9407edba21468f31e
镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在):

  • 通过config命令

npm config set registry https://registry.npm.taobao.org npm info underscore (如果上面配置正确这个命令会有字符串response)
  • 命令行指定

npm --registry https://registry.npm.taobao.org info underscore 
  • 编辑 ~/.npmrc 加入下面内容

registry = https://registry.npm.taobao.org

搜索镜像: https://npm.taobao.org

建立或使用镜像,参考: https://github.com/cnpm/cnpmjs.org

1.1.2 hexo 安装

npm install hexo-cli -gnpm install hexo --savenpm install hexo-deployer-git --save

2 blog 内容管理

2.1 新建 blog

$ hexo init blog$ cd blog$ npm install$ hexo server

此时文件目录为

blog
_config_yml // 注配置文件
db.json // 数据
debug.log // 调试日志
_node_mudules // nodejs 相关依赖
package.json // 配置依赖
scaffolds // 脚手架 - 也就是一个工具模板
source // 存放blog正文的地方
themes // 存放皮肤的地方

默认访问 http://localhost:4000

2.2 页面打不开

如果你的电脑没有翻-墙 可能会打不开页面。因为页面中默认使用了ajax.google.com 下的js包。因此我们要把包删掉

解决办法:

进入你刚新建好的 blog根目录 ,进入
themes/landscape/layout/_partial
1,找到 after-footer.ejs

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"> </script>

替换成

<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js“ > </script>

2,找到 header.ejs

注释掉或者删掉 下面这句css引用

<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel=”stylesheet” type=”text/css”>

重新 hexo server 之后。访问 http://localhost:4000 就会看到blog主页了。

2.3 新建文章

当我们想写一篇blog时 在blog根目录下我们可以通过

hexo new <title> 

指令来实现

例如我们想新建一篇主题为hello的blog

hexo new hello

输出信息如下

[info] File created at /Users/Night/Web/projects/java/temp/blog-test/source/_posts/hello.md

hexo会在 source/_posts/ 下新建hello.md 文件。

编辑 hello.md 就是编辑你的blog内容了 — markdown语法

hello.md 的文档和目录可以这样添加

title: hexo、github、多说、搭建免费博客date: 2014-10-19 12:56:58tags:- tag1- tag2- tag3categories:- 目录__// 你的内容<!--more--> // 以上为摘要

2.4 静态处理

因为我们的blog要部署到github静态服务器上面,所有我们还要将页面进行静态化

hexo 为我们提供了 hexo g 的方法。进入blog根目录 执行

$ hexo g

会有如下提示信息

[info] Files loaded in 0.081s[create] Generated: archives/index.html (48ms)[create] Generated: archives/2014/index.html (10ms)[create] Generated: archives/2014/10/index.html (7ms)[create] Generated: index.html (9ms)[create] Generated: 2014/10/19/hello-world/index.html (19ms)[create] Generated: js/script.js (5ms)[create] Generated: css/style.css (434ms)[create] Generated: css/fonts/FontAwesome.otf (1ms)[create] Generated: css/fonts/fontawesome-webfont.eot (2ms)[create] Generated: css/fonts/fontawesome-webfont.svg (2ms)[create] Generated: css/fonts/fontawesome-webfont.ttf (4ms)[create] Generated: css/fonts/fontawesome-webfont.woff (1ms)[create] Generated: css/images/banner.jpg (3ms)[create] Generated: fancybox/blank.gif (2ms)[create] Generated: fancybox/fancybox_loading.gif (1ms)[create] Generated: fancybox/fancybox_loading@2x.gif (1ms)[create] Generated: fancybox/fancybox_overlay.png (1ms)[create] Generated: fancybox/fancybox_sprite.png (0ms)[create] Generated: fancybox/fancybox_sprite@2x.png (1ms)[create] Generated: fancybox/jquery.fancybox.css (0ms)[create] Generated: fancybox/jquery.fancybox.js (1ms)[create] Generated: fancybox/jquery.fancybox.pack.js (1ms)[create] Generated: fancybox/helpers/fancybox_buttons.png (1ms)[create] Generated: fancybox/helpers/jquery.fancybox-buttons.css (1ms)[create] Generated: fancybox/helpers/jquery.fancybox-buttons.js (0ms)[create] Generated: fancybox/helpers/jquery.fancybox-media.js (1ms)[create] Generated: fancybox/helpers/jquery.fancybox-thumbs.css (2ms)[create] Generated: fancybox/helpers/jquery.fancybox-thumbs.js (1ms)[info] 28 files generated in 0.565s

blog根目录下会生成public文件夹-里面就是刚才生成的静态文件

hexo 的详细实用说明请参看官方文档

github

3 将blog部署到 github

部署到github 非常简单。因为hexo已经为你集成好了发布到github的配置。

我们只需要 修改 blog 目录下的 _config.yml 文件

打开 _config.yml 找到如下配置

deploy:  type: github  repo: https://github.com/yourname/blog.git

修改 repo : ‘your github repo’

回到 blog 目录 执行

hexo deploy

你会发现public 目录下的页面已经发布到github gh-pages 分支了

往后我们要做的就是用自己的域名指向 github。

yaml语法要求严格,注意空格。建议把github地址那条语句重新手写一遍,冒号后面要有一个空格。

配置那里的冒号后面是有一个半角的空格的.如果中间有空格用分号引用一下

http://blog.netpi.me/%E5%AE%9E%E7%94%A8/hexo/