272 lines
13 KiB
HTML
272 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html class="no-js" lang="en-GB">
|
||
<head>
|
||
<title>Publishing Sculpin Sites with GitHub Pages | Oliver Davies</title>
|
||
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<meta name="description" content="How I moved my Sculpin site to GitHub Pages.">
|
||
|
||
<meta property="og:url" content="https://www.oliverdavies.uk/blog/2017/07/13/publishing-sculpin-sites-with-github-pages">
|
||
<meta property="og:title" content="Publishing Sculpin Sites with GitHub Pages"/>
|
||
|
||
|
||
|
||
<meta property="og:image" content="https://www.oliverdavies.uk/assets/images/blog/jackson-octocat.png"/>
|
||
<meta property="og:image:type" content="image/png"/>
|
||
<meta property="og:image:width" content="451"/>
|
||
<meta property="og:image:height" content="200"/>
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://www.oliverdavies.uk/assets/css/main.css">
|
||
<link rel="stylesheet" href="https://www.oliverdavies.uk/assets/css/blog-post.css">
|
||
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=57" sizes="57x57">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=114" sizes="114x114">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=72" sizes="72x72">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=144" sizes="144x144">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=60" sizes="60x60">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=120" sizes="120x120">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=76" sizes="76x76">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=152" sizes="152x152">
|
||
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=160" sizes="160x160">
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=96" sizes="96x96">
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=32" sizes="32x32">
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=16" sizes="16x16">
|
||
</head>
|
||
<body class="">
|
||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||
<span class="sr-only">Toggle navigation</span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
<a class="navbar-brand" href="https://www.oliverdavies.uk/">Oliver Davies</a>
|
||
</div>
|
||
|
||
<div id="navbar" class="collapse navbar-collapse" role="navigation">
|
||
<ul class="nav navbar-nav">
|
||
<li class="">
|
||
<a href="/">About</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/experience">Experience</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/testimonials">Testimonials</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/talks">Talks</a>
|
||
</li>
|
||
|
||
<li class="active">
|
||
<a href="/blog">Blog</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/contact">Contact</a>
|
||
</li>
|
||
</ul>
|
||
</div> </div>
|
||
</nav>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<main class="col-md-9">
|
||
<h1>Publishing Sculpin Sites with GitHub Pages</h1>
|
||
|
||
<p class="posted text-light">13th July 2017</p>
|
||
|
||
<p><img
|
||
src="/assets/images/blog/jackson-octocat.png"
|
||
alt=""
|
||
class="is-centered"
|
||
style="margin-bottom: 20px"
|
||
></p>
|
||
|
||
<p>Earlier this week I moved this site from my personal Linode server to <a href="https://pages.github.com">GitHub Pages</a>.</p>
|
||
|
||
<p>This made sense as I already kept the source code in <a href="https://github.com/opdavies/oliverdavies.uk">on GitHub</a>, the issue was that GitHub Pages doesn’t know how to dynamically parse and generate a Sculpin site like it does with some other static site generators. It can though parse and serve HTML files, which is what Sculpin generates. It’s just a case of how those files are added to GitHub.</p>
|
||
|
||
<p>I’ve seen different implementations of this, mostly where the Sculpin code is on one branch, and the generated HTML code is on a separate <code>gh-pages</code> or <code>master</code> branch (depending on your repository name). I’m not fond of this approach as it means automatically checking out and merging branches which can get messy, and also it’s weird to look at a repo’s branches page and see one branch maybe tens or hundreds of commits both ahead and behind the default branch.</p>
|
||
|
||
<p>This has been made simpler and tidier now that we can use a <code>docs</code> directory within the repository to serve content.</p>
|
||
|
||
<p><img
|
||
src="/assets/images/blog/github-pages.png"
|
||
alt=""
|
||
class="is-centered"
|
||
style="margin-top: 20px; margin-bottom: 20px"
|
||
></p>
|
||
|
||
<p>This means that I can simply re-generate the site after making changes and add it as an additional commit to my main branch with no need to switch branches or perform a merge.</p>
|
||
|
||
<p>To simplify this, I’ve added a new <a href="https://github.com/opdavies/oliverdavies.uk/blob/master/build.sh">build.sh script</a> into my repository to automate the sites. This is how it currently looks:</p>
|
||
|
||
<pre><code class="language-bash">#!/usr/bin/env bash
|
||
|
||
SITE_ENV="prod"
|
||
|
||
# Remove the existing docs directory, build the site and create the new
|
||
# docs directory.
|
||
rm -rf ./docs
|
||
vendor/bin/sculpin generate --no-interaction --clean --env=${SITE_ENV}
|
||
touch output_${SITE_ENV}/.nojekyll
|
||
mv output_${SITE_ENV} docs
|
||
|
||
# Ensure the correct Git variables are used.
|
||
git config --local user.name 'Oliver Davies'
|
||
git config --local user.email oliver@oliverdavies.uk
|
||
|
||
# Add, commit and push the changes.
|
||
git add --all docs
|
||
git commit -m 'Build.'
|
||
git push origin HEAD
|
||
</code></pre>
|
||
|
||
<p>This begins by removing the deleting the existing <code>docs</code> directory and re-generating the site with the specified environment. Then I add a <code>.nojekyll</code> file and rename the output directory to replace <code>docs</code>.</p>
|
||
|
||
<p>Now the changes can be added, committed and pushed. Once pushed, the new code is automatically served by GitHub Pages.</p>
|
||
|
||
<h2 id="https">HTTPS</h2>
|
||
|
||
<p>GitHub Pages unfortunately does <a href="https://github.com/blog/2186-https-for-github-pages">not support HTTPS for custom domains</a>.</p>
|
||
|
||
<p>As the site was previously using HTTPS, I didn’t want to have to go back to HTTP, break any incoming links and lose any potential traffic. To continue using HTTPS, I decided to <a href="https://blog.cloudflare.com/secure-and-fast-github-pages-with-cloudflare">use Cloudflare</a> to serve the site via their CDN which does allow for HTTPS traffic.</p>
|
||
|
||
<h2 id="next-steps">Next Steps</h2>
|
||
|
||
<ul>
|
||
<li>Enable automatically running <code>build.sh</code> when new changes are pushed to GitHub rather than running it manually. I was previously <a href="/blog/2015/07/21/automating-sculpin-jenkins">using Jenkins</a> and Fabric for this, though I’m also going to look into using Travis to accomplish this.</li>
|
||
<li>Add the pre-build steps such as running <code>composer install</code> and <code>yarn</code> to install dependencies, and <code>gulp</code> to create the front-end assets. This was previously done by Jenkins in my previous setup.</li>
|
||
</ul>
|
||
|
||
<h2 id="resources">Resources</h2>
|
||
|
||
<ul>
|
||
<li><a href="https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch">Publishing your GitHub Pages site from a /docs folder on your master branch</a></li>
|
||
<li><a href="https://github.com/blog/572-bypassing-jekyll-on-github-pages">Bypassing Jekyll on GitHub Pages</a></li>
|
||
<li><a href="https://blog.cloudflare.com/secure-and-fast-github-pages-with-cloudflare">Secure and fast GitHub Pages with CloudFlare</a></li>
|
||
</ul>
|
||
|
||
<p class="tags">
|
||
Tags:
|
||
<a href="https://www.oliverdavies.uk/blog/tags/sculpin">sculpin</a>, <a href="https://www.oliverdavies.uk/blog/tags/php">php</a>, <a href="https://www.oliverdavies.uk/blog/tags/github">github</a> </p>
|
||
<div class="post-pager is-flex">
|
||
<div class="is-half">
|
||
<a href="/blog/2017/06/09/introducing-the-drupal-meetups-twitterbot">
|
||
« Introducing the Drupal Meetups Twitterbot
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="about-author">
|
||
<h2>About the Author</h2>
|
||
|
||
<img src="//www.oliverdavies.uk/assets/images/me-precedent.jpg" alt="Picture of Oliver" class="img-circle">
|
||
|
||
<p>Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a Senior Developer at <a href="https://microserve.io">Microserve</a> and also provides freelance consultancy services for Drupal websites, PHP applications and Linux servers.</p>
|
||
</div>
|
||
</main>
|
||
|
||
<div class="col-md-3">
|
||
<div class="panel badges text-center">
|
||
<a class="badge--da-member" href="https://assoc.drupal.org/membership" title="I’m a Drupal Association member.">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/da-individual-member.png"
|
||
alt="Drupal Association Individual Member"
|
||
width="152"
|
||
>
|
||
</a>
|
||
|
||
<a href="http://drupalcores.com/#opdavies">
|
||
<img
|
||
alt="I built Drupal 8 with hand holding a wrench on blue background"
|
||
src="//www.oliverdavies.uk/assets/images/drupal-8.jpg"
|
||
/>
|
||
</a>
|
||
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/badges/acquia-certified-developer-drupal-8.png"
|
||
alt="Acquia Certified Developer - Drupal 8 Exam Badge"
|
||
height="147" width="147"
|
||
/>
|
||
|
||
<a href="http://conference.phpnw.org.uk/phpnw17">
|
||
<img src="//www.oliverdavies.uk/assets/images/badges/phpnw17.png" alt="">
|
||
</a>
|
||
</div>
|
||
<div class="availability panel panel-default">
|
||
<div class="panel-heading">Availability</div>
|
||
|
||
<div class="panel-body">
|
||
<p>
|
||
<i class="fa fa-thumbs-o-up text-warning"></i>
|
||
|
||
|
||
Currently have limited part-time capacity
|
||
</p>
|
||
<p>
|
||
<i class="fa fa-thumbs-o-down text-danger"></i>
|
||
|
||
Currently no spare full-time capacity.
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div> </div>
|
||
<footer class="container">
|
||
<p class="copyright">
|
||
© 2010-2017 Oliver Davies. Built with <a href="https://sculpin.io">Sculpin</a>.
|
||
</p>
|
||
|
||
<div class="meetups">
|
||
<h2>Things that I organise</h2>
|
||
<ul>
|
||
<li class="meetups--drupal-bristol">
|
||
<a href="http://www.drupalbristol.org.uk" title="Drupal Bristol">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg"
|
||
alt="Drupal Bristol logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
<li class="meetups--drupalcamp-bristol">
|
||
<a href="http://www.drupalcampbristol.co.uk" title="DrupalCamp Bristol">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png"
|
||
alt="DrupalCamp Bristol logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
<li class="meetups--phpsw">
|
||
<a href="http://phpsw.uk" title="PHPSW">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/meetups/phpsw.jpeg"
|
||
alt="PHPSW logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://www.oliverdavies.uk/assets/js/site.js"></script>
|
||
|
||
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-11967257-1', 'auto'); ga('send', 'pageview');</script>
|
||
|
||
</body>
|
||
</html>
|