门户网站建站多少钱,功能性质网站,只用js可以做网站吗,synology wordpress前言
使用github pages服务搭建博客的好处有#xff1a;
全是静态文件#xff0c;访问速度快#xff1b;免费方便#xff0c;不用花一分钱就可以搭建一个自由的个人博客#xff0c;不需要服务器不需要后台#xff1b;可以随意绑定自己的域名#xff0c;不仔细看的话根…前言
使用github pages服务搭建博客的好处有
全是静态文件访问速度快免费方便不用花一分钱就可以搭建一个自由的个人博客不需要服务器不需要后台可以随意绑定自己的域名不仔细看的话根本看不出来你的网站是基于github的数据绝对安全基于github的版本管理想恢复到哪个历史版本都行博客内容可以轻松打包、转移、发布到其它平台等等
1.1. 准备工作
在开始一切之前你必须已经
有一个github账号没有的话去注册一个安装了node.js、npm并了解相关基础知识安装了git for windows或者其它git客户端
本文所使用的环境
Windows8.1node.js5.5.0git1.9.2hexo3.2.2
搭建github博客
2.1. 创建仓库
新建一个名为你的用户名.github.io的仓库比如说如果你的github用户名是test那么你就新建test.github.io的仓库必须是你的用户名其它名称无效将来你的网站访问地址就是 http://test.github.io 了是不是很方便
由此可见每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。
注意
注册的邮箱一定要验证否则不会成功仓库名字必须是username.github.io其中username是你的用户名仓库创建成功不会立即生效需要过一段时间大概10-30分钟或者更久我的等了半个小时才生效
创建成功后默认会在你这个仓库里生成一些示例页面以后你的网站所有代码都是放在这个仓库里啦。
2.2. 绑定域名
当然你不绑定域名肯定也是可以的就用默认的 xxx.github.io 来访问如果你想更个性一点想拥有一个属于自己的域名那也是OK的。
首先你要注册一个域名域名注册以前总是推荐去godaddy现在觉得其实国内的阿里云也挺不错的价格也不贵毕竟是大公司放心
绑定域名分2种情况带www和不带www的。
域名配置最常见有2种方式CNAME和A记录CNAME填写域名A记录填写IP由于不带www方式只能采用A记录所以必须先ping一下你的用户名.github.io的IP然后到你的域名DNS设置页将A记录指向你ping出来的IP将CNAME指向你的用户名.github.io这样可以保证无论是否添加www都可以访问如下 然后到你的github项目根目录新建一个名为CNAME的文件无后缀里面填写你的域名加不加www看你自己喜好因为经测试
如果你填写的是没有www的比如 mygit.me那么无论是访问 http://www.mygit.me 还是 http://mygit.me 都会自动跳转到 http://mygit.me如果你填写的是带www的比如 www.mygit.me 那么无论是访问 http://www.mygit.me 还是 http://mygit.me 都会自动跳转到 http://www.mygit.me如果你填写的是其它子域名比如 abc.mygit.me那么访问 http://abc.mygit.me 没问题但是访问 http://mygit.me 不会自动跳转到 http://abc.mygit.me
另外说一句在你绑定了新域名之后原来的你的用户名.github.io并没有失效而是会自动跳转到你的新域名。
配置SSH key
为什么要配置这个呢因为你提交代码肯定要拥有你的github权限才可以但是直接使用用户名和密码太不安全了所以我们使用ssh key来解决本地和服务器的连接问题。
用git bash执行如下命令
$ cd ~/. ssh #检查本机已存在的ssh密钥如果提示No such file or directory 说明你是第一次使用git。
ssh-keygen -t rsa -C 邮件地址然后连续3次回车最终会生成一个文件在用户目录下打开用户目录找到.ssh\id_rsa.pub文件记事本打开并复制里面的内容打开你的github主页进入个人设置 - SSH and GPG keys - New SSH key 将刚复制的内容粘贴到key那里title随便填保存。
3.1. 测试是否成功
$ ssh -T gitgithub.com # 注意邮箱地址不用改如果提示Are you sure you want to continue connecting (yes/no)?输入yes然后会看到 Hi liuxianan! You’ve successfully authenticated, but GitHub does not provide shell access. 看到这个信息说明SSH已配置成功
此时你还需要配置
$ git config --global user.name liuxianan// 你的github用户名非昵称
$ git config --global user.email xxxqq.com// 填写你的github注册邮箱具体这个配置是干嘛的我没仔细深究。
使用hexo写博客
4.1. hexo简介
Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具支持Markdown格式有众多优秀插件和主题。
官网 http://hexo.io github: https://github.com/hexojs/hexo
4.2. 原理
由于github pages存放的都是静态文件博客存放的不只是文章内容还有文章列表、分类、标签、翻页等动态内容假如每次写完一篇文章都要手动更新博文目录和相关链接信息相信谁都会疯掉所以hexo所做的就是将这些md文件都放在本地每次写完文章后调用写好的命令来批量完成相关页面的生成然后再将有改动的页面提交到github。
4.3. 注意事项
安装之前先来说几个注意事项
很多命令既可以用Windows的cmd来完成也可以使用git bash来完成但是部分命令会有一些问题为避免不必要的问题建议全部使用git bash来执行hexo不同版本差别比较大网上很多文章的配置信息都是基于2.x的所以注意不要被误导hexo有2种_config.yml文件一个是根目录下的全局的_config.yml一个是各个theme下的
4.4. 安装
$ npm install -g hexo4.5. 初始化
在电脑的某个地方新建一个名为hexo的文件夹名字可以随便取比如我的是F:\Workspaces\hexo由于这个文件夹将来就作为你存放代码的地方所以最好不要随便放。
$ cd /f/Workspaces/hexo/
$ hexo inithexo会自动下载一些文件到这个目录包括node_modules目录结构如下图 $ hexo g # 生成
$ hexo s # 启动服务执行以上命令之后hexo就会在public文件夹生成相关html文件这些文件将来都是要提交到github去的 hexo s是开启本地预览服务打开浏览器访问 http://localhost:4000 即可看到内容很多人会碰到浏览器一直在转圈但是就是加载不出来的问题一般情况下是因为端口占用的缘故因为4000这个端口太常见了解决端口冲突问题请参考这篇文章
http://blog.liuxianan.com/windows-port-bind.html
4.6. 修改主题
既然默认主题很丑那我们别的不做首先来替换一个好看点的主题。这是 官方主题。
个人比较喜欢的2个主题hexo-theme-jekyll 和 hexo-theme-yilia。
首先下载这个主题
$ cd /f/Workspaces/hexo/
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia下载后的主题都在这里 修改_config.yml中的theme: landscape改为theme: yilia然后重新执行hexo g来重新生成。
如果出现一些莫名其妙的问题可以先执行hexo clean来清理一下public的内容然后再来重新生成和发布。
4.7. 上传之前
在上传代码到github之前一定要记得先把你以前所有代码下载下来虽然github有版本管理但备份一下总是好的因为从hexo提交代码时会把你以前的所有代码都删掉。
4.8. 上传到github
如果你一切都配置好了发布上传很容易一句hexo d就搞定当然关键还是你要把所有东西配置好。
首先ssh key肯定要配置好。
其次配置_config.yml中有关deploy的部分
正确写法
deploy:type: gitrepository: gitgithub.com:liuxianan/liuxianan.github.io.gitbranch: master错误写法
deploy:type: githubrepository: https://github.com/liuxianan/liuxianan.github.io.gitbranch: master后面一种写法是hexo2.x的写法现在已经不行了无论是哪种写法此时直接执行hexo d的话一般会报如下错误
Deployer not found: github 或者 Deployer not found: git原因是还需要安装一个插件
npm install hexo-deployer-git --save其它命令不确定部署这个命令一定要用git bash否则会提示Permission denied (publickey).
打开你的git bash输入hexo d就会将本次有改动的代码全部提交没有改动的不会 4.9. 保留CNAME、README.md等文件
提交之后网页上一看发现以前其它代码都没了此时不要慌一些非md文件可以把他们放到source文件夹下这里的所有文件都会原样复制除了md文件到public目录的 由于hexo默认会把所有md文件都转换成html包括README.md所有需要每次生成之后、上传之前手动将README.md复制到public目录并删除README.html。
4.10. 常用hexo命令
常见命令
hexo new postName #新建文章
hexo new page pageName #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口默认端口4000ctrl c关闭server
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本缩写
hexo n hexo new
hexo g hexo generate
hexo s hexo server
hexo d hexo deploy组合命令
hexo s -g #生成并本地预览
hexo d -g #生成并上传4.11. _config.yml
这里面都是一些全局配置每个参数的意思都比较简单明了所以就不作详细介绍了。
需要特别注意的地方是冒号后面必须有一个空格否则可能会出问题。
4.12. 写博客
定位到我们的hexo根目录执行命令
hexo new my-first-bloghexo会帮我们在_posts下生成相关md文件 我们只需要打开这个文件就可以开始写博客了默认生成如下内容 当然你也可以直接自己新建md文件用这个命令的好处是帮我们自动生成了时间。
一般完整格式如下
---
title: postName #文章页面上的显示名称一般是中文
date: 2013-12-02 15:30:16 #文章生成时间一般不改当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签可空多标签请用格式注意:后面有个空格
description: 附加一段文章摘要字数最好在140字以内会出现在meta的description里面
---以下是正文那么hexo new page postName命令和hexo new postName有什么区别呢
hexo new page my-second-blog生成如下 最终部署时生成hexo\public\my-second-blog\index.html但是它不会作为文章出现在博文目录。
4.12.1. 写博客工具
那么用什么工具写博客呢这个我还没去找以前自己使用editor.md简单弄了个大家有好用的hexo写博客工具可以推荐个。
4.12.2. 如何让博文列表不显示全部内容
默认情况下生成的博文目录会显示全部的文章内容如何设置文章摘要的长度呢
答案是在合适的位置加上!--more--即可例如
# 前言使用github pages服务搭建博客的好处有1. 全是静态文件访问速度快
2. 免费方便不用花一分钱就可以搭建一个自由的个人博客不需要服务器不需要后台
3. 可以随意绑定自己的域名不仔细看的话根本看不出来你的网站是基于github的!--more--4. 数据绝对安全基于github的版本管理想恢复到哪个历史版本都行
5. 博客内容可以轻松打包、转移、发布到其它平台
6. 等等最终效果 本文仅限入门学习关于hexo搭建个人博客的更高级玩法大家可以另找教程。
参考
http://www.cnblogs.com/zhcncn/p/4097881.html
http://www.jianshu.com/p/05289a4bc8b2
