How to configure 5267 blog in several hours
一、入门篇:镜花水月 第一步:安装Git(64位)、Node.JS(64位)、hexo。
其中,hexo 的安装使用git命令:npm install -g hexo 。
第二步:创建博客文件夹(bloggerMe ),并在本地浏览hello-world网页。
1 2 3 hexo init hexo generate |可简写位hexo g,下同。 hexo server
执行以上命令,到浏览器中输入localhost:4000查看。
第三步:Git-ssh配置
1 2 $ git config --global user.name "5267" $ git config --global user.email "tangyang_cool@yeah.net"
1 $ ssh-keygen -t rsa -C "humingx@yeah.net"
连续3个回车。如果不需要密码的话。 最后得到了两个文件:id_rsa和id_rsa.pub 。如果不是第一次,就选择overwrite。
确保 ssh-agent 是可用的。ssh-agent是一种控制用来保存公钥身份验证所使用的私钥的程序,其实ssh-agent就是一个密钥管理器,运行ssh-agent以后,使用ssh-add将私钥交给ssh-agent保管,其他程序需要身份验证的时候可以将验证申请交给ssh-agent来完成整个认证过程。
1 2 3 4 5 $ eval "$(ssh-agent -s)" Agent pid 59566 $ ssh-add ~/.ssh/id_rsa $ clip < ~/.ssh/id_rsa
setting——>SSH and GPG keys——>SSH keys——>new SSH key
第四步:部署到服务器,并在网页段浏览hello-world网页。
打开_config.yml(在bloggerMe文件夹下),定位到deploy哪一行,进行替换。
1 2 3 4 deploy: type: git repository: git@github.com:5267 /5267. github.io.git branch: master
1 2 3 npm install hexo-deployer-git --save hexo g hexo d
看到如下信息则表示部署成功,由于部署有时间差,所以需要过几分钟才能在网页端查看(输入:5267.github.com )看到。
小结:几个问题 部分问题解决方案参考Zippera’s blog 的bugs部分。这里主要说明一下我在部署过程遇到的一个问题(卡了半天啊,还好最终找到原因了!)。
hexo d部署时,报错:remote: Permission to access ‘https://github.io.git denied to candy-frankie’. 。原因 :_config.yml中的repository参数配置错误,由于选用的SSH免密码登录方式,所以应选用SSH,而不是https方式。这在个人repository页面可看到,如下:
所以需要将https://github.com/5267/5267.github.io.git改成git@github.com:5267/5267.github.io.git。再运行hexo d即可成功部署。
效果图
参考资料
git-ssh 配置和使用:https://segmentfault.com/a/1190000002645623和http://www.cnblogs.com/BeginMan/p/3544493.html。
zippera’s blog:http://www.zipperary.com/2013/05/28/hexo-guide-2/和http://www.freehao123.com/hexo-node-js/。
二、入门篇:水中取月 上节中,已成功在本地和github搭建好了自己的hexo博客站点,但并未发表文章,站点也还未配置。在本节,将介绍如何个性化设置,撰文和发表。 站点配置用到两个文件,一个是对整站的配置H:\bloggerMe\_config.yml ,另一个是对主题的配置H:\bloggerMe\themes\light\_config.yml ,我们来分别介绍。
注意:这里使用TTstyle 作为博客主题 。
G:\bloggerMe_config.yml ——全局配置文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 # Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site 网站配置,对应的设置直接反正在我的博客。 title: 5267's blog subtitle: if not now, when? if not me, who? description: 我与她的故事?! author: 5267 email: tangyang_cool@yeah.net language: zh-CN timezone: # URL | 这项暂不配置,绑定域名后,欲创建sitemap.xml需要配置该项 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://yoursite.com root: / permalink: :year/:month/:day/:title/ permalink_defaults: # Directory source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: # Writing | 文章布局,写作格式的定义。 new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: # Category & Tag default_category: uncategorized category_map: tag_map: # Archives 默认值为2,这里都修改为1,相应页面就只会列出标题,而非全文 ## 2: Enable pagination ## 1: Disable pagination ## 0: Fully Disable archive: 1 category: 1 tag: 1 # 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: YYYY-MM-DD time_format: HH:mm:ss # Pagination | 每页显示文章数,可以自定义,我将10改成了5 ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Extensions | 这里配置站点所用主题和插件,暂默认,后面会介绍怎么修改 ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: landscape # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repository: git@github.com:5267/5267.github.io.git branch: master
G:\bloggerMe\themes\hexo-theme-ttstyle ——主题配置文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 theme_name: TTStyle site_url: http://5267. github.io github: "http://github.com/5267" qq: "http://shang.qq.com/wpa/qunwpa?idkey=fbb8977b610053616895fc132db8b9abad47b398cf3759bd569e61406de6701b" gitPagesServerAddr: "http://gitcafe.com/signup?invited_by=tangkunyin" gitPagesServerName: "GitCafe" open_in_new: true favicon: /images/favicon.png avatar: /images/favicon.png highlightCode: true highlightStyle: xcode donateEnable: true widgets: - category - tagcloud - blogroll - intro - rss - tag - twitter - weibo
至此,基本配置完成,对于支付宝二维码定额支付、头像修改、多说评论的添加、一键添加QQ群添加等问题将在后续介绍。 OK,站点配置好了,如何发表一篇文章呢?
1、hexo new “my new post”。 2、在G:\bloggerMe\source\_posts中打开这个文件(打开工具:sublime),配置开头。
1 2 3 4 5 6 7 8 9 10 --- title: 道德经 | 第一章 date: 2016 -05 -04 20 :24 :51 categories: 读书笔记 tags: --- 道,可道也,非恒道也。名,可名也,非恒名也。 “无”,名天地之始;“有”,名万物之母。 故,常“无”,欲以观其妙;常“有”,欲以观其徼。 此两者,同出而异名,同谓之玄。玄之又玄,眾妙之门。 ......略......
执行命令hexo g,hexo s ,打开localhost:4000,查看效果。(退出server,用ctrl+c )。 3、 hexo d , 同步到Github,查看网站效果。
三、入门篇:渐入佳境 1、Github主页和QQ爱好群的修改(左下角)。 其中,qq对应的那段代码去QQ推广中心 获取。 2、支付宝二维码定额打赏、头像修改(右上角)。 定位到G:\bloggerMe\themes\hexo-theme-ttstyle\source\images 文件夹中,将对应图片替换即可。其中,支付宝二维码定额打赏图片获取方式:登陆支付宝手机客户端主页——>收款——>设置金额——>下载图片即可。微信捐赠图片获取方式类似。头像自己照一张喜欢的照片替换即可。 3、多说评论狂的添加(文章末尾)注册多说 ——>添加站点:配置好自己主页的信息——>点击左边栏的”工具”,复制”通用代码”。 定位到G:\bloggerMe\themes\hexo-theme-ttstyle\layout\_partial 。打开additional.ejs文件,将”通用代码”替换掉对应的多说评论框。如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ##其中,data-url为站点网址。 <!-- 多说评论框 start --> <div class="ds-thread" data-thread-key="<%= articleId %>" data-title="<%= articleTitle %>" data-url="http://5267.github.io/<%= page.permalink %>"></div> <!-- 多说评论框 end --> <!-- 多说公共JS代码 start (一个网页只需插入一次) --> <script type="text/javascript"> var duoshuoQuery = {short_name:"5267"}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); </script> <!-- 多说公共JS代码 end -->
4、添加文末脚注(最下角) 定位到G:\bloggerMe\themes\hexo-theme-ttstyle\layout\_partial ,打开footer.ejs文件,简单修改即可,比如我的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <section> <center> <font size=3 color=purple>专注数据分析、数据挖掘、大数据领域,习惯使用R、Python两把数据分析利器。非常推崇开源理念,我将在这儿和大家分享平时学习、生活的点点滴滴,期待和大伙儿共同进步!曾实习单位:蚂蚁金服*大数据安全部(数据分析师),同花顺*金融研究中心(金融研究员),IBM*CDL(consultant)</font> </center> <br/> <p id="copyright"><a href="http://hexo.io" target="_blank">Hexo</a>创建 | 主题<a href="https://github.com/tangkunyin/hexo-theme-ttstyle" target="_blank"><%= theme.theme_name %></a> | 感谢<a href="<%= theme.gitPagesServerAddr %>" target="_blank"><%= theme.gitPagesServerName %></a>支持</p> <!-- 百度统计 --> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?a01595b492af7e4a793230e3d49ae638"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>
到此,站点配置完毕,hexo g,hexo s预览效果。如下