/

使用 GitHub 和 Hexo 搭建个人独立博客

Wordpress 这类博客系统功能强大,可对与我只想划拉的写点东西的人,感觉大材小用了。而且 Wordpress 需要部署,网站的服务器也会带来问题,国内的服务器首先需要备案,费用不低,国外服务器访问速度受影响。

近来接触到一种新的博客系统 Hexo,它的不同地方就是将:在上线编写博客和页面渲染的过程在线下完成

在本地编写博文的 Markdown 文件,使用 Hexo 将博客网站的所有前台 HTML 等全部生成,让后将生成的文件上传的服务器就行了。

那么原来 wp 中的评论等动态功能怎么办呢?放心第三方服务商早已为我们考虑了。例如:disqus就是一家第三方社会化评论系统,主要为网站主提供评论托管服务。

本文的操作的系统环境是 Ubuntu 15,Windows 下的搭建可触类旁通。

了解 Hexo

A fast, simple & powerful blog framework

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页,Hexo setup 官方文档

安装 Git

Download for Linux and Unix | git-scm

安装 Node.js

Linux | Mac 安装 Node.js 与常见问题 | zyf.im

安装 Hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo:

npm install -g hexo-cli

建站

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件:

$ hexo init 
$ cd
$ npm install

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

├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

新建一篇文章

hexo new [layout] </span><br></pre></td></tr></tbody></table></figure><p>如果没有设置 layout 的话,默认使用 <code>_config.yml</code> 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。</p><h3 id="生成静态文件"><a href="#生成静态文件" class="headerlink" title="生成静态文件"></a>生成静态文件</h3><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">hexo generate</span><br><span class="line"></span><br><span class="line"><span class="comment"># 可以简写为</span></span><br><span class="line"></span><br><span class="line">hexo g</span><br></pre></td></tr></tbody></table></figure><h3 id="启动服务器"><a href="#启动服务器" class="headerlink" title="启动服务器"></a>启动服务器</h3><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">hexo server</span><br><span class="line"></span><br><span class="line"><span class="comment"># 可以简写为</span></span><br><span class="line"></span><br><span class="line">hexo s</span><br></pre></td></tr></tbody></table></figure><p>网站会在 <a href="http://localhost:4000" target="_blank" rel="noopener">http://localhost:4000</a> 下启动。在服务器启动期间,Hexo 会监视文件变动并自动更新,您无须重启服务器。</p><h2 id="部署静态网页到-GitHub"><a href="#部署静态网页到-GitHub" class="headerlink" title="部署静态网页到 GitHub"></a>部署静态网页到 GitHub</h2><h3 id="注册设置-GitHub"><a href="#注册设置-GitHub" class="headerlink" title="注册设置 GitHub"></a>注册设置 GitHub</h3><ol><li>登录 GitHub,注册自定义用户名如:<code>imzyf</code></li><li>在主页右下角创建 New repository,name 必须和用户名一致如:<code>imzyf.github.io</code></li><li>等待 3 分钟左右,之后即可访问静态主页如:<code>https://imzyf.github.io</code></li></ol><h3 id="同步内容至-GitHub"><a href="#同步内容至-GitHub" class="headerlink" title="同步内容至 GitHub"></a>同步内容至 GitHub</h3><ol><li>在 Hexo 目录下 <code>git clone git@github.com:imzyf/imzyf.github.io.git</code></li><li>将 <code>public</code> 文件下的所有文件拷贝到 <code>imzyf.github.io</code> 下</li><li><code>git add .</code> 增加当前子目录下所有更改过的文件至 index</li><li><code>git commit -m 'xxx'</code> 提交到本地</li><li><code>git push origin master</code> 将当前分支 push 到远程 master 分支</li><li>最后访问主页<code>http://imzyf.github.io</code> 观察效果</li></ol><h2 id="绑定个人域名"><a href="#绑定个人域名" class="headerlink" title="绑定个人域名"></a>绑定个人域名</h2><p>在 GitHub 项目页面,Settings -> GitHub Pages,Source 选择 master branch,Custom domain 填写自己的域名,同时勾选 Enforce HTTPS 让你的网址支持 HTTPS。</p><p>在你的域名服务商那里,将填写的域名解析到:<code><username>.github.io</code> 利于 <code>imzyf.github.io</code>。</p><h2 id="References"><a href="#References" class="headerlink" title="References"></a>References</h2><ul><li><a href="https://wsgzao.github.io/post/hexo-guide/" target="_blank" rel="noopener">HellDog-使用 GitHub 和 Hexo 搭建免费静态 Blog</a></li></ul></article><ul class="tags-postTags"><li><a href="/tags/github/" rel="tag"># github</a></li><li><a href="/tags/hexo/" rel="tag"># hexo</a></li><li><a href="/tags/git/" rel="tag"># git</a></li></ul></div></div></div><nav id="gobottom" class="pagination"><a class="prev-post" title="Eclipse Maven Spring SpringMVC Mybatis 整合" href="/2016/06/27/eclipse-maven-spring-springmvc-mybatis-example/">← Eclipse Maven Spring SpringMVC Mybatis 整合 </a><span class="prev-next-post">·</span> <a class="next-post" title="Ubuntu 下连接蓝牙键盘" href="/2016/06/14/ubuntu-bluetooth-keyboard/">Ubuntu 下连接蓝牙键盘 →</a></nav></div><div class="toc-bar"><div class="toc-btn-bar"><a href="#site-main" class="toc-btn"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M793.024 710.272a32 32 0 1 0 45.952-44.544l-310.304-320a32 32 0 0 0-46.4 0.48l-297.696 320a32 32 0 0 0 46.848 43.584l274.752-295.328 286.848 295.808z"/></svg></a><div class="toc-btn toc-switch"><svg class="toc-open" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M779.776 480h-387.2a32 32 0 0 0 0 64h387.2a32 32 0 0 0 0-64M779.776 672h-387.2a32 32 0 0 0 0 64h387.2a32 32 0 0 0 0-64M256 288a32 32 0 1 0 0 64 32 32 0 0 0 0-64M392.576 352h387.2a32 32 0 0 0 0-64h-387.2a32 32 0 0 0 0 64M256 480a32 32 0 1 0 0 64 32 32 0 0 0 0-64M256 672a32 32 0 1 0 0 64 32 32 0 0 0 0-64"/></svg> <svg class="toc-close hide" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z"/><path d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z"/></svg></div><a href="#gobottom" class="toc-btn"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M231.424 346.208a32 32 0 0 0-46.848 43.584l297.696 320a32 32 0 0 0 46.4 0.48l310.304-320a32 32 0 1 0-45.952-44.544l-286.848 295.808-274.752-295.36z"/></svg></a></div><div class="toc-main"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#了解-Hexo"><span class="toc-text">了解 Hexo</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#安装-Git"><span class="toc-text">安装 Git</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#安装-Node-js"><span class="toc-text">安装 Node.js</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#安装-Hexo"><span class="toc-text">安装 Hexo</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#建站"><span class="toc-text">建站</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#新建一篇文章"><span class="toc-text">新建一篇文章</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#生成静态文件"><span class="toc-text">生成静态文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#启动服务器"><span class="toc-text">启动服务器</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#部署静态网页到-GitHub"><span class="toc-text">部署静态网页到 GitHub</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#注册设置-GitHub"><span class="toc-text">注册设置 GitHub</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#同步内容至-GitHub"><span class="toc-text">同步内容至 GitHub</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#绑定个人域名"><span class="toc-text">绑定个人域名</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#References"><span class="toc-text">References</span></a></li></ol></div></div><div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"></div><div class="pswp__scroll-wrap"><div class="pswp__container"><div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div></div><div class="pswp__ui pswp__ui--hidden"><div class="pswp__top-bar"><div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button><div class="pswp__preloader"><div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div></div></div><div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></div></div><button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button><div class="pswp__caption"><div class="pswp__caption__center"></div></div></div></div></div></div><aside class="read-next outer"><div class="inner"><div class="read-next-feed"><article class="read-next-card" style="background-image:url(https://i.loli.net/2017/11/26/5a19c56faa29f.jpg)"><header class="read-next-card-header"><small class="read-next-card-header-sitetitle">— 全荔以赴。 —</small><h3 class="read-next-card-header-title">Recent Posts</h3></header><div class="read-next-divider"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5"/></svg></div><div class="read-next-card-content"><ul><li><a href="/2020/09/18/yii2-where/">Yii2 where 条件</a></li><li><a href="/2020/09/11/use-illuminate-components-without-laravel/">在 Laravel 之外使用 illuminate 组件</a></li><li><a href="/2020/08/17/redis-matching-a-pattern-delete-keys/">Redis 正则批量删除 key</a></li></ul></div><footer class="read-next-card-footer"><a href="/archives">MORE →</a></footer></article><article class="read-next-card" style="background-image:url(https://i.loli.net/2017/11/26/5a19c56faa29f.jpg)"><header class="read-next-card-header tagcloud-card"><h3 class="read-next-card-header-title">Categories</h3></header><div class="read-next-card-content"><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/report/">report</a></li></ul></div></article><article class="read-next-card" style="background-image:url(https://i.loli.net/2017/11/26/5a19c56faa29f.jpg)"><header class="read-next-card-header tagcloud-card"><h3 class="read-next-card-header-title">Tag Cloud</h3></header><div class="read-next-card-content-ext"><a href="/tags/algorithm/" style="font-size:19px">algorithm</a> <a href="/tags/aws/" style="font-size:14px">aws</a> <a href="/tags/centos/" style="font-size:14.71px">centos</a> <a href="/tags/composer/" style="font-size:15.43px">composer</a> <a href="/tags/css/" style="font-size:16.86px">css</a> <a href="/tags/docker/" style="font-size:14px">docker</a> <a href="/tags/git/" style="font-size:24px">git</a> <a href="/tags/github/" style="font-size:15.43px">github</a> <a href="/tags/hexo/" style="font-size:15.43px">hexo</a> <a href="/tags/html/" style="font-size:16.14px">html</a> <a href="/tags/ios/" style="font-size:20.43px">ios</a> <a href="/tags/java/" style="font-size:21.14px">java</a> <a href="/tags/js/" style="font-size:14px">js</a> <a href="/tags/leetcode/" style="font-size:22.57px">leetcode</a> <a href="/tags/linux/" style="font-size:18.29px">linux</a> <a href="/tags/mac/" style="font-size:16.86px">mac</a> <a href="/tags/moive/" style="font-size:14px">moive</a> <a href="/tags/mysql/" style="font-size:21.86px">mysql</a> <a href="/tags/nginx/" style="font-size:16.86px">nginx</a> <a href="/tags/node-js/" style="font-size:15.43px">node-js</a> <a href="/tags/npm/" style="font-size:14px">npm</a> <a href="/tags/photoshop/" style="font-size:14px">photoshop</a> <a href="/tags/php/" style="font-size:23.29px">php</a> <a href="/tags/phpstorm/" style="font-size:14.71px">phpstorm</a> <a href="/tags/pr/" style="font-size:14px">pr</a> <a href="/tags/react/" style="font-size:16.14px">react</a> <a href="/tags/react-native/" style="font-size:14px">react-native</a> <a href="/tags/reading-notes/" style="font-size:17.57px">reading-notes</a> <a href="/tags/redis/" style="font-size:14.71px">redis</a> <a href="/tags/report/" style="font-size:17.57px">report</a> <a href="/tags/ssh/" style="font-size:14.71px">ssh</a> <a href="/tags/swift/" style="font-size:19.71px">swift</a> <a href="/tags/swoft/" style="font-size:14px">swoft</a> <a href="/tags/ubuntu/" style="font-size:20.43px">ubuntu</a> <a href="/tags/ufw/" style="font-size:14px">ufw</a> <a href="/tags/vim/" style="font-size:14.71px">vim</a> <a href="/tags/vscode/" style="font-size:14px">vscode</a> <a href="/tags/vue/" style="font-size:14px">vue</a> <a href="/tags/xcode/" style="font-size:14px">xcode</a></div></article></div></div></aside><div id="search" class="search-overlay"><div class="search-form"><input id="local-search-input" class="search-input" type="text" name="search" placeholder="Search ..."> <a class="search-overlay-close" href="#"></a></div><div id="local-search-result"></div></div><footer class="site-footer outer"><div class="site-footer-content inner"><div class="copyright"><a href="/" title="全荔以赴。">全荔以赴。 © 2020</a></div><nav class="site-footer-nav"><a href="https://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> <a href="https://github.com/xzhih/hexo-theme-casper" title="Casper" target="_blank" rel="noopener">Casper</a></nav></div></footer><script data-ad-client="ca-pub-2330747317815601" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>if(window.navigator && navigator.serviceWorker) {
        navigator.serviceWorker.getRegistrations().then(function(registrations) {
            for(let registration of registrations) {
                registration.unregister()
            }
        })
    }</script><script id="scriptLoad" src="/js/allinone.min.js" async></script><script>document.getElementById("scriptLoad").addEventListener("load",function(){new Blazy;searchFunc("/")})</script><link rel="stylesheet" href="/photoswipe/photoswipe.css"><link rel="stylesheet" href="/photoswipe/default-skin/default-skin.css"><script src="/photoswipe/photoswipe.min.js"></script><script src="/photoswipe/photoswipe-ui-default.min.js"></script></body></html>