独立博客搭建教程,介绍域名注册、DNS设置、github和Hexo设置!
可以看看我的这篇《为什么你要写博客?》
也可以看看这篇《我的博客时代》
一直纠结于哪里写博客,曾用过新浪博客,点点,tumblr,QQ空间,LOFTER,weebly,scriptogr.am,farbox,roon,自搭WordPress,都不满意。再后来也弄过Jekyll和Octopress,觉累不爱。
直到hexo,这个风格极高的程序猿写作方式,我喜欢。就连hexo的发音都像是黑客哦!如果你跟我一样纠结哪里写博,那就来到GitHub吧,让我们一起hexo!希绝对不会让你失望,相信很快hexo就会流行起来。
hexo出自台湾大学生tommy351之手,是一个基于Node.js的静态博客程序,其编译上百篇文字只需要几秒。hexo生成的静态网页可以直接放到GitHub Pages,BAE,SAE等平台上。
作为技术小白,没有技术基础,看网上的教程也云里雾里,看程序员的教程相当不容易,稍微有些细节描述得不清楚自己就要绕弯路去找答案(善用搜索引擎),所以,在自己的博客搭建完成之后,把过程全记录下来,供后期和我一样的小白参考(是的,我坚信还有很多一样和我一样的人),所以尽可能详细的整理,其中的资料大多摘录其他人的教程,在这里感谢这些作者们。
搭建过程你或许觉得有那么点小繁琐,但一旦搭建完成,写文章是极简单,极舒服的。
只需要几个简单命令,你就可以完成一切。
hexo n #写文章 hexo g #生成 hexo d #部署 # 可与hexo g合并为 hexo d -g
下面逐步介绍,进入正题。
依次下载安装:
1、Node.js
2、Git
可以看:一步步在GitHub上创建博客主页 全系列 by pchou(推荐)
教程主要参考beiyuu的《使用Github Pages建独立博客》写成。
2014年5月15日更新:发现一个更简单的方法:用静态页面生成静态博客 byisnowfy
我们如何让本地git项目与远程的github建立联系呢?用SSH keys。
首先我们需要检查你电脑上现有的ssh key:
git config --global user.email "邮箱地址@youremail.com" git config --global user.name "用户名" cd ~/. ssh 检查本机的ssh密钥
如果提示:No such file or directory 说明你是第一次使用git。
ssh-keygen -t rsa -C "邮件地址@youremail.com" Generating public/private rsa key pair. Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>
ssh -T git@github.com
若有问题,请重新设置。常见错误请参考:
GitHub Help - Generating SSH Keys
GitHub Help - Error Permission denied (publickey)
Node和Git都安装好后,可执行如下命令安装hexo:
npm install -g hexo
然后,执行init命令初始化hexo到你指定的目录:(也可以cd到目标目录,执行hexo init。)
hexo init <folder>
cd 到你的init目录,执行如下命令:
hexo generate
执行如下命令,启动本地服务,进行文章预览调试。
hexo server
浏览器输入http://localhost:4000就可以看到效果。
各有所爱,博客换主题是必不可少的,hexo的主题列表Hexo Themes。
我比较喜欢RagingCat简洁大方。
git clone https://github.com/RagingCat/hexo-theme-ragingcat.git themes/RagingCat
Menu: #配置页头显示哪些菜单 Home: / Archives: /archives # Reading: /reading Albums: /albums Music: /music About: /about widgets: #配置页脚显示哪些小挂件 - category - tag - links - rss rss: ## RSS address. favicon: img/favicon.ico ## size:32px*32px,`.ico` is recommended ShowCustomFont: true toc: article: true ## show contents in article. aside: false ## show contents in aside. fancybox: true #是否开启fancybox效果 author: #配置页底显示 intro_line2: "A lamp, a Walkman, a book..." intro_line1: "This is 洛桑扎巴's personal blog." weibo: doctor666777 ## e.g. 436062867 for http://weibo.com/436062867 twitter: ztd811 ## e.g. yangjiansky for https://twitter.com/yangjiansky github: mba811 ## e.g. A-limon for https://github.com/A-limon email: ztd811@gmail.com ##email duoshuo: #多说账号 enable: true ## duoshuo.com short_name: lszb811 ## duoshuo short name. jiathis: enable: false ## if you use jiathis as your share tool,the built-in share tool won't be display. id: ## e.g. your jiathis ID. google_analytics: enable: true id: ## e.g. UA-xxxxxx-2 your google analytics ID.
cd themes/RagingCat git pull
执行new page命令
hexo new page "about"
在hexo\source\下会生成about目录,里面有个index.md,直接编辑就可以了,然后在主题的_config.yml中将其配置显示出来。
上述步骤,也可以手工生成,在hexo\source\下手工新建about和index.md也是完全等价的。
GitHub Pages 自定义404页面非常容易,直接在根目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。
其实,404页面可以做更多有意义的事,来做个404公益项目吧。做点有意义的事情,也对得起这个域名。
目前有如下几个公益404接入地址,我选择了腾讯的。404页面,每个人可以做的更多。
考虑到博客的速度,同时也为了便于博客的迁移,图床是必须的。我墙裂推荐七牛,访问速度极快,支持日志、防盗链和水印。
免费用户有每月10GB流量+总空间10GB+PUT/DELETE 10万次请求+GET 100万次请求,这对个人博客来说足够,不够的话点这个活动页面,也可通过邀请好友获得奖励,我也求一下七牛邀请。有一点要说明的是,七牛没有目录的概念,但是文件名可以包含/,比如2013/11/27/reading/photos-0.jpg,参考这里关于key-value存储系统。
七牛除了作为图床还可以作为其他静态文件存储空间,如果非要说不足的话,就是文件管理界面不是很友好,不支持CNAME到分配的永久链接,也不能绑定未备案的自有域名,必须备案才可以。
只推荐上godaddy购买,安全,而且可以使用支付宝。
教程可以参照这:《2013年10月新版godaddy域名注册图文教程》。
GoDaddy的NameServers有时会被墙,因此墙裂推荐国内的DNSPod解析域名,免费服务真心不错。支持微信/邮件提醒,监控与报警,访问统计,健康诊断,搜索引擎推送,速度哇哇的,对于我来说足够。
两步设置就可以搞定,怎么操作参考Godaddy注册商域名修改DNS地址。
hexo new "postName" #新建文章 hexo new page "pageName" #新建页面 hexo generate #生成静态页面至public目录 hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server) hexo deploy #将.deploy目录部署到GitHub
hexo deploy -g hexo server -g
hexo n == hexo new hexo g == hexo generate hexo s == hexo server hexo d == hexo deploy
至此,基本操作介绍完毕。
默认目录结构:
├── .deploy ├── public ├── scaffolds ├── scripts ├── source | ├── _drafts | └── _posts ├── themes ├── _config.yml └── package.json
deploy:执行hexo deploy命令部署到GitHub上的内容目录
public:执行hexo generate命令,输出的静态网页内容目录
scaffolds:layout模板文件目录,其中的md文件可以添加编辑
scripts:扩展脚本目录,这里可以自定义一些javascript脚本
source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
_drafts:草稿文章
_posts:发布文章
themes:主题文件目录
_config.yml:全局配置文件,大多数的设置都在这里
package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮
重头戏_config.yml,做个简单说明:
# Hexo Configuration ## Docs: http://hexo.io/docs/configuration.html ## Source: https://github.com/tommy351/hexo/ # Site #整站的基本信息 title: 见性 随心 自在 #网站标题 subtitle: 一盏灯、一个随身听、一本书 #网站副标题 description: 洛桑扎巴's blog | music | apple | buddhism | Thang-ga | life #网站描述,给搜索引擎用的,在生成html中的head->meta中可看到 author: 洛桑扎巴 #网站作者,在下方显示 email: ztd811@gmail.com #联系邮箱 language: zh-CN #语言 # URL #域名和文件结构 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://lszb811.com #你的域名 root: / permalink: :year/:month/:day/:title/ tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code # Directory source_dir: source public_dir: public # Writing #写文章选项 new_post_name: :title.md # File name of new posts default_layout: post #默认layout方式 auto_spacing: false # Add spaces between asian characters and western characters titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab max_open_file: 100 multi_thread: true filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false highlight: #代码高亮 enable: true #是否启用 line_number: true #是否显示行号 tab_replace: # Category & Tag #分类与标签 default_category: uncategorized category_map: tag_map: # Archives #存档,这里的说明好像不对。全部选择1,这个选项与主题中的选项有时候会有冲突 ## 2: Enable pagination ## 1: Disable pagination ## 0: Fully Disable archive: 1 category: 1 tag: 1 # Server #本地服务参数 ## Hexo uses Connect as a server ## You can customize the logger format as defined in ## http://www.senchalabs.org/connect/logger.html port: 4000 server_ip: 0.0.0.0 logger: false logger_format: # Date / Time format #日期显示格式 ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: MMM D YYYY time_format: H:mm:ss # Pagination #分页设置 ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Disqus #社会化评论disqus,我使用多说,在主题中配置 disqus_shortname: # Extensions #插件,暂时未安装插件 ## Plugins: https://github.com/tommy351/hexo/wiki/Plugins ## Themes: https://github.com/tommy351/hexo/wiki/Themes theme: RagingCat #主题 exclude_generator: # Deployment #部署 ## Docs: http://hexo.io/docs/deployment.html deploy: type: github repository: git@gitcafe.com:mba811/mba811.git #你的GitHub Pages仓库,这里我用的是gitcafe。 branch: gitcafe-pages
页面展现的全部逻辑都在每个主题中控制,源代码在hexo\themes\jacman\中:
. ├── languages #多语言 | ├── default.yml #默认语言 | └── zh-CN.yml #中文语言 ├── layout #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制 | ├── _partial #局部的布局,此目录下的*.ejs是对头尾等局部的控制 | └── _widget #小挂件的布局,页面下方小挂件的控制 ├── source #源码 | ├── css #css源码 | | ├── _base #*.styl基础css | | ├── _partial #*.styl局部css | | ├── fonts #字体 | | ├── images #图片 | | └── style.styl #*.styl引入需要的css源码 | ├── fancybox #fancybox效果源码 | └── js #javascript源代码 ├── _config.yml #主题配置文件 └── README.md #用GitHub的都知道
title: postName #文章页面上的显示名称,可以任意修改,不会出现在URL中 date: 2013-12-02 15:30:16 #文章生成时间,一般不改,当然也可以任意修改 categories: example #分类 tags: [tag1,tag2,tag3] #文章标签,可空,多标签请用格式,注意:后面有个空格 --- 以下正文
安装插件:
npm install <plugin-name> --save
启用插件:在*hexo_config.yml文件添加:
plugins: - <plugin-name> #插件名
升级插件:
npm update
卸载插件:
npm uninstall <plugin-name>
实例:
添加sitemap和feed插件
npm install hexo-generator-sitemap --save npm install hexo-generator-feed --save
修改_config.yml,增加以下内容
# Extensions Plugins: - hexo-generator-feed - hexo-generator-sitemap #Feed Atom feed: type: atom path: atom.xml limit: 20 #sitemap sitemap: path: sitemap.xml
更新hexo:
npm update -g hexo
更新主题:
cd themes/你的主题 git pull
更新插件:
npm update
你要保留好自己的博客源码。换机器写博客,就只能使用各种网盘的同步功能,或者你把你的站点源文件提交到某代码托管服务器。另外,貌似这篇很牛逼,Hexo 服务器端布署及 Dropbox 同步。
一步步在GitHub上创建博客主页 全系列 by pchou
搭建一个免费的,无限流量的Blog — github Pages和Jekyll入门
Github Pages与Hexo建个人博客流程 by Kesco