{"id":296323,"date":"2019-10-04T07:18:23","date_gmt":"2019-10-04T14:18:23","guid":{"rendered":"https:\/\/css-tricks.com\/?p=296323"},"modified":"2019-10-04T07:18:23","modified_gmt":"2019-10-04T14:18:23","slug":"using-github-template-repos-to-jump-start-static-site-projects","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/using-github-template-repos-to-jump-start-static-site-projects\/","title":{"rendered":"Using GitHub Template Repos to Jump-Start Static Site Projects"},"content":{"rendered":"<p>If you\u2019re getting started with <a href=\"https:\/\/www.staticgen.com\/\" rel=\"noopener\">static site generators<\/a>, did you know you can use <a href=\"https:\/\/github.blog\/2019-06-06-generate-new-repositories-with-repository-templates\/\" rel=\"noopener\">GitHub template repositories<\/a> to quickly start new projects and reduce your setup time?<\/p>\n<p><!--more--><\/p>\n<p>Most static site generators make installation easy, but each project still requires configuration after installation. When you build a lot of similar projects, you may duplicate effort during the setup phase. GitHub template repositories may save you a lot of time if you find yourself:<\/p>\n<ul>\n<li>creating the same folder structures from previous projects,<\/li>\n<li>copying and pasting config files from previous projects, and<\/li>\n<li>copying and pasting boilerplate code from previous projects.<\/li>\n<\/ul>\n<p>Unlike <a href=\"https:\/\/help.github.com\/en\/articles\/fork-a-repo\" rel=\"noopener\">forking a repository<\/a>, which allows you to use <em>someone else\u2019s code<\/em> as a starting point, template repositories allow you to use <em>your own code<\/em> as a starting point, where each new project gets <em>its own, independent Git history<\/em>. Check it out!<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/XrXSg9ixYSY\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>Let\u2019s take a look at how we can set up a convenient workflow. We\u2019ll set up a boilerplate Eleventy project, turn it into a Git repository, host the repository on GitHub, and then configure that repository to be a template. Then, next time you have a static site project, you\u2019ll be able to come back to the repository, click a button, and start working from an exact copy of your boilerplate.<\/p>\n<p>Are you ready to try it out? Let\u2019s set up our own static site using GitHub templates to see just how much templates can help streamline a static site project.<\/p>\n<p>I\u2019m using <a href=\"https:\/\/www.11ty.io\/\" rel=\"noopener\">Eleventy<\/a> as an example of a static site generator because it\u2019s my personal go-to, but this process will work for <a href=\"https:\/\/gohugo.io\/\" rel=\"noopener\">Hugo<\/a>, <a href=\"https:\/\/jekyllrb.com\/\" rel=\"noopener\">Jekyll<\/a>, <a href=\"https:\/\/nuxtjs.org\/\" rel=\"noopener\">Nuxt<\/a>, or any other flavor of static site generator you prefer.<\/p>\n<p>If you want to see the finished product, check out my <a href=\"https:\/\/github.com\/ogdenstudios\/static-site-template\" rel=\"noopener\">static site template repository<\/a>.<\/p>\n<h3>First off, let\u2019s create a template folder<\/h3>\n<p>We&#8217;re going to kick things off by running each of these in the command line:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">cd ~\r\nmkdir static-site-template\r\ncd static-site-template<\/code><\/pre>\n<p>These three commands <em>change directory<\/em> into your <em>home directory<\/em> (<code>~<\/code> in Unix-based systems), <em>make a new directory<\/em> called <code>static-site-template<\/code>, and then <em>change directory<\/em> into the <code>static-site-template<\/code> directory. <\/p>\n<h3>Next, we\u2019ll initialize the Node project<\/h3>\n<p>In order to work with Eleventy, we need to install <a href=\"https:\/\/nodejs.org\/en\/download\/\" rel=\"noopener\">Node.js<\/a> which allows your computer to run JavaScript code outside of a web browser.<\/p>\n<p>Node.js comes with <strong>node package manager<\/strong>, or <a href=\"https:\/\/www.npmjs.com\/get-npm\" rel=\"noopener\">npm<\/a>, which downloads <a href=\"https:\/\/www.npmjs.com\/\" rel=\"noopener\">node packages<\/a> to your computer. Eleventy is a node package, so we can use npm to fetch it.<\/p>\n<p>Assuming Node.js is installed, let\u2019s head back to the command line and run: <\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">npm init<\/code><\/pre>\n<p>This creates a file called package.json in the directory. npm will prompt you for a series of questions to fill out the metadata in your package.json. After answering the questions, the Node.js project is initialized.<\/p>\n<h3>Now we can install Eleventy<\/h3>\n<p>Initializing the project gave us a package.json file which lets npm install packages, run scripts, and do other tasks for us inside that project. npm uses package.json as an entry point in the project to figure out precisely how and what it should do when we give it commands.<\/p>\n<p>We can tell npm to install Eleventy as a <strong>development dependency<\/strong> by running: <\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">npm install -D @11ty\/eleventy<\/code><\/pre>\n<p>This will add a <code>devDependency<\/code> entry to the package.json file and install the Eleventy package to a <code>node_modules<\/code> folder in the project.<\/p>\n<p>The cool thing about the package.json file is that any other computer with Node.js and npm can read it and know to install Eleventy in the project <code>node_modules<\/code> directory without having to install it manually. See, we&#8217;re already streamlining things!<\/p>\n<h3>Configuring Eleventy<\/h3>\n<p>There are tons of ways to configure an Eleventy project. Flexibility is Eleventy\u2019s strength. For the purposes of this tutorial, I\u2019m going to demonstrate a configuration that provides: <\/p>\n<ul>\n<li>A folder to cleanly separate <strong>website source code<\/strong> from <strong>overall project files<\/strong><\/li>\n<li>An HTML document for a single page website<\/li>\n<li>CSS to style the document<\/li>\n<li>JavaScript to add functionality to the document<\/li>\n<\/ul>\n<p>Hop back in the command line. Inside the <code>static-site-template<\/code> folder, run these commands one by one (excluding the comments that appear after each <code>#<\/code> symbol): <\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">mkdir src           # creates a directory for your website source code\r\nmkdir src\/css       # creates a directory for the website styles\r\nmkdir src\/js        # creates a directory for the website JavaScript\r\ntouch index.html    # creates the website HTML document\r\ntouch css\/style.css # creates the website styles\r\ntouch js\/main.js    # creates the website JavaScript<\/code><\/pre>\n<p>This creates the basic file structure that will inform the Eleventy build. However, if we run Eleventy right now, it won\u2019t generate the website we want. We still have to configure Eleventy to understand that it should <strong>only use files in  the  <code>src<\/code> folder  for building<\/strong>, and that <strong>the <code>css<\/code> and <code>js<\/code> folders should be processed with <a href=\"https:\/\/www.11ty.io\/docs\/copy\/\" rel=\"noopener\">passthrough file copy<\/a><\/strong>.<\/p>\n<p>You can give this information to Eleventy through a file called <code>.eleventy.js<\/code> in the root of the <code>static-site-template<\/code> folder.  You can create that file by running this command inside the <code>static-site-template<\/code> folder: <\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">touch .eleventy.js<\/code><\/pre>\n<p>Edit the file in your favorite text editor so that it contains this: <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">module.exports = function(eleventyConfig) {\r\n  eleventyConfig.addPassthroughCopy(\"src\/css\");\r\n  eleventyConfig.addPassthroughCopy(\"src\/js\");\r\n  return {\r\n    dir: {\r\n      input: \"src\"\r\n    }\r\n  };\r\n};<\/code><\/pre>\n<p>Lines 2 and 3 tell Eleventy to use <strong>passthrough file copy<\/strong> for CSS and JavaScript. Line 6 tells Eleventy to use only the <code>src<\/code> directory to build its output. <\/p>\n<p>Eleventy will now give us the expected output we want. Let\u2019s put that to the test by putting this In the command line:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">npx @11ty\/eleventy<\/code><\/pre>\n<p>The <code>npx<\/code> command allows npm to execute code from the project <code>node_module<\/code>  directory without touching the global environment. You\u2019ll see output like this: <\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">Writing _site\/index.html from .\/src\/index.html.\r\nCopied 2 items and Processed 1 file in 0.04 seconds (v0.9.0)<\/code><\/pre>\n<p>The <code>static-site-template<\/code> folder should now have a new directory in it called <code>_site<\/code>. If you dig into that folder, you\u2019ll find the <code>css<\/code> and <code>js<\/code> directories, along with the <code>index.html<\/code> file. <\/p>\n<p>This <code>_site<\/code> folder is the final output from Eleventy. It is the entirety of the website, and you can host it on any <a href=\"https:\/\/serverless.css-tricks.com\/services\/hosting\">static web host<\/a>. <\/p>\n<p>Without any content, styles, or scripts, the generated site isn\u2019t very interesting:<\/p>\n<figure id=\"post-296334\" class=\"align-left media-296334\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/gh-templates-01.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<h3>Let\u2019s create a boilerplate website<\/h3>\n<p>Next up, we\u2019re going to put together the baseline for a super simple website we can use as the starting point for all projects moving forward.<\/p>\n<p>It\u2019s worth mentioning that <a href=\"https:\/\/www.11ty.io\/docs\/starter\/\" rel=\"noopener\">Eleventy has a ton of boilerplate files<\/a> for different types of projects. It\u2019s totally fine to go with one of these though I often find I wind up needing to roll my own. So that\u2019s what we\u2019re doing here.<\/p>\n<pre rel=\"HTML\"><code class=\"language-html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\r\n    &lt;title&gt;Static site template&lt;\/title&gt;\r\n    &lt;meta name=\"description\" content=\"A static website\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"css\/style.css\"&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n  &lt;h1&gt;Great job making your website template!&lt;\/h1&gt;\r\n  &lt;script src=\"js\/main.js\"&gt;&lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>We may as well style things a tiny bit, so let\u2019s add this to <code>src\/css\/style.css<\/code>:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">body {\r\n  font-family: sans-serif;\r\n}<\/code><\/pre>\n<p>And we can confirm JavaScript is hooked up by adding this to <code>src\/js\/main.js<\/code>: <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">(function() {\r\n  console.log('Invoke the static site template JavaScript!');\r\n})();<\/code><\/pre>\n<p>Want to see what we\u2019ve got? Run <code>npx @11ty\/eleventy --serve<\/code> in the command line. Eleventy will spin up a server with <a href=\"https:\/\/www.browsersync.io\/\" rel=\"noopener\">Browsersync<\/a> and provide the local URL, which is probably something like <code>localhost:8080<\/code>. <\/p>\n<figure id=\"post-296335\" class=\"align-left media-296335\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/gh-templates-02.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>Even the console tells us things are ready to go!<\/figcaption><\/figure>\n<h3>Let\u2019s move this over to a GitHub repo<\/h3>\n<p><a href=\"https:\/\/git-scm.com\/\" rel=\"noopener\">Git<\/a> is the most commonly used version control system in software development. Most Unix-based computers come with it installed, and you can turn any directory into a Git repository by running this command:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">git init<\/code><\/pre>\n<p>We should get a message like this:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">Initialized empty Git repository in \/path\/to\/static-site-template\/.git\/<\/code><\/pre>\n<p>That means a hidden <code>.git<\/code> folder was added inside the project directory, which allows the Git program to run commands against the project. <\/p>\n<p>Before we start running a bunch of Git commands on the project, we need to tell Git about files we <strong>don\u2019t<\/strong> want it to touch. <\/p>\n<p>Inside the <code>static-site-template<\/code> directory, run:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">touch .gitignore<\/code><\/pre>\n<p>Then open up that file in your favorite text editor. Add this content to the file:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">_site\/\r\nnode_modules\/<\/code><\/pre>\n<p>This tells Git to <strong>ignore<\/strong> the <code>node_modules<\/code> directory and the <code>_site<\/code> directory. Committing every single Node.js module to the repo could make things really messy and tough to manage. All that information is already in package.json anyway.<\/p>\n<p>Similarly, there\u2019s no need to version control <code>_site<\/code>. Eleventy can generate it from the files in <code>src<\/code>, so no need to take up space in GitHub. It\u2019s also possible that if we were to:<\/p>\n<ul>\n<li>version control <code>_site<\/code>,<\/li>\n<li>change files in <code>src<\/code>, or<\/li>\n<li>forget to run Eleventy again,<\/li>\n<\/ul>\n<p>then  <code>_site<\/code> will reflect an older build of the website, and future developers (or a future version of yourself) may accidentally use an outdated version of the site.<\/p>\n<p>Git is version control <em>software<\/em>, and GitHub is a Git repository <em>host<\/em>. There are other Git host providers like <a href=\"https:\/\/bitbucket.org\/\" rel=\"noopener\">BitBucket<\/a> or <a href=\"https:\/\/about.gitlab.com\/\" rel=\"noopener\">GitLab<\/a>, but since we\u2019re talking about a GitHub-specific feature (template repositories), we\u2019ll push our work up to GitHub. If you don\u2019t already have an account, go ahead and <a href=\"https:\/\/github.com\/join\" rel=\"noopener\">join GitHub<\/a>. Once you have an account, <a href=\"https:\/\/help.github.com\/en\/articles\/creating-a-new-repository\" rel=\"noopener\">create a GitHub repository<\/a> and name it <strong>static-site-template<\/strong>.<\/p>\n<p>GitHub will ask a few questions when setting up a new repository. One of those is whether we want to <strong>create a new repository on the command line<\/strong> or <strong>push an existing repository from the command line<\/strong>. Neither of these choices are exactly what we need. They assume we either don\u2019t have anything at all, or we have been using Git locally already. The <code>static-site-template<\/code> project already exists, has a Git repository initialized, but doesn\u2019t yet have any commits on it.<\/p>\n<p>So let\u2019s ignore the prompts and instead run the following commands in the command line. <strong>Make sure to  have  the URL GitHub provides in the command from line 3 handy:<\/strong><\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">git add .\r\ngit commit -m \"first commit\"\r\ngit remote add origin https:\/\/github.com\/your-username\/static-site-template.git\r\ngit push -u origin master<\/code><\/pre>\n<p>This adds the entire <code>static-site-template<\/code> folder to the Git staging area. It commits it with the message &#8220;first commit,&#8221; adds a remote repository (the GitHub repository), and then pushes up the master branch to that repository.<\/p>\n<h3>Let\u2019s template-ize this thing<\/h3>\n<p>OK, this is the crux of what we have been working toward. <a href=\"https:\/\/github.blog\/2019-06-06-generate-new-repositories-with-repository-templates\/\" rel=\"noopener\">GitHub templates<\/a> allows us to use the repository we\u2019ve just created as the foundation for other projects in the future \u2014 without having to do all the work we\u2019ve done to get here!<\/p>\n<p>Click <strong>Settings<\/strong> on the GitHub landing page of the repository to get started. On the settings page, check the button for <strong>Template repository<\/strong>.<\/p>\n<figure id=\"post-296336\" class=\"align-left media-296336\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/gh-templates-03.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>Now when we go back to the repository page, we\u2019ll get a big green button that says <strong>Use this template<\/strong>. Click it and GitHub will create a new repository that\u2019s a mirror of our new template. The new repository will start with the same files and folders as <strong>static-site-template<\/strong>. From there, download or clone that new repository to start a new project with all the base files and configuration we set up in the template project.<\/p>\n<h3>We can extend the template for future projects<\/h3>\n<p>Now that we have a template repository, we can use it for any new static site project that comes up. However, You may find that a new project has additional needs than what\u2019s been set up in the template. For example, let\u2019s say you need to tap into Eleventy\u2019s <a href=\"https:\/\/www.11ty.io\/docs\/templates\/\" rel=\"noopener\">templating engine<\/a> or <a href=\"https:\/\/www.11ty.io\/docs\/data\/\" rel=\"noopener\">data processing power<\/a>.<\/p>\n<p>Go ahead and build on top of the template as you work on the new project. When you finish that project, identify pieces you want to reuse in future projects. Perhaps you figured out a cool hover effect on buttons. Or you built your own JavaScript carousel element. Or maybe you\u2019re really proud of the document design and hierarchy of information.<\/p>\n<p>If you think anything you did on a project might come up again on your next run, remove the project-specific details and add the new stuff to your template project. Push those changes up to GitHub, and the next time you use <strong>static-site-template<\/strong> to kick off a project, your reusable code will be available to you. <\/p>\n<h3>There are some limitations to this, of course<\/h3>\n<p>GitHub template repositories are a useful tool for avoiding repetitive setup on new web development projects. I find this especially useful for static site projects. These template repositories might not be as appropriate for more complex projects that require external services like databases with configuration that cannot be version-controlled in a single directory.<\/p>\n<p>Template repositories allow you to ship reusable code you have written so you can solve a problem once and use that solution over and over again. But while your new solutions will carry over to future projects, they won\u2019t be ported backwards to old projects. <\/p>\n<p>This is a useful process for sites with <strong>very similar<\/strong> structure, styles, and functionality. Projects with wildly varied requirements may not benefit from this code-sharing, and you could end up bloating your project with unnecessary code.<\/p>\n<h3>Wrapping up<\/h3>\n<p>There you have it! You now have everything you need to not only start a static site project using Eleventy, but the power to re-purpose it on future projects. GitHub templates are so handy for kicking off projects quickly where we otherwise would have to re-build the same wheel over and over. Use them to your advantage and enjoy a jump start on your projects moving forward!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019re getting started with static site generators, did you know you can use GitHub template repositories to quickly start new projects and reduce your setup time?<\/p>\n","protected":false},"author":266402,"featured_media":296339,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[638,6315,1025],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/octocat-copies.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":345807,"url":"https:\/\/css-tricks.com\/automatic-daily-github-backups-restored-in-seconds\/","url_meta":{"origin":296323,"position":0},"title":"Automatic Daily GitHub Backups, Restored in Seconds","date":"August 3, 2021","format":false,"excerpt":"Any company that uses GitHub for critical applications needs a backup that can be restored quickly when needed. Cyberattacks, human errors, or a forced push are just some of the scenarios that can result in the loss of GitHub data. In the event of an emergency, you can\u2019t be wasting\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/BKH_CSSTricks_Ads_Revised.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305646,"url":"https:\/\/css-tricks.com\/continuous-deployments-for-wordpress-using-github-actions\/","url_meta":{"origin":296323,"position":1},"title":"Continuous Deployments for WordPress Using GitHub Actions","date":"April 6, 2020","format":false,"excerpt":"Continuous Integration (CI) workflows are considered a best practice these days. As in, you work with your version control system (Git), and as you do, CI is doing work for you like running tests, sending notifications, and deploying code. That last part is called Continuous Deployment (CD). But shipping code\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/github-actions-wordpress.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":346449,"url":"https:\/\/css-tricks.com\/from-a-single-repo-to-multi-repos-to-monorepo-to-multi-monorepo\/","url_meta":{"origin":296323,"position":2},"title":"From a Single Repo, to Multi-Repos, to Monorepo, to Multi-Monorepo","date":"August 17, 2021","format":false,"excerpt":"I've been working on the same project for several years. Its initial version was a huge monolithic app containing thousands of files. It was poorly architected and non-reusable, but was hosted in a single repo making it easy to work with. Later, I \u201cfixed\u201d the mess in the project by\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/connected-repos.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":293787,"url":"https:\/\/css-tricks.com\/building-a-full-stack-serverless-application-with-cloudflare-workers\/","url_meta":{"origin":296323,"position":3},"title":"Building a Full-Stack Serverless Application with Cloudflare Workers","date":"August 9, 2019","format":false,"excerpt":"One of my favorite developments in software development has been the advent of serverless. As a developer who has a tendency to get bogged down in the details of deployment and DevOps, it's refreshing to be given a mode of building web applications that simply abstracts scaling and infrastructure away\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/cloudflare-workers-1-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":295432,"url":"https:\/\/css-tricks.com\/fast-static-sites-with-netlify-and-anymod\/","url_meta":{"origin":296323,"position":4},"title":"Fast Static Sites with Netlify and AnyMod","date":"September 12, 2019","format":false,"excerpt":"In about 10 minutes, we'll set up a workflow that makes static sites dead simple. You'll get the following: Free https Free or cheap hosting Build sites quickly Edit with live reload Edit when you\u2019ve forgotten everything in 6 months Start: signups We can get all this by using Netlify\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/sep-2019.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":308227,"url":"https:\/\/css-tricks.com\/how-to-make-a-simple-cms-with-cloudflare-github-actions-and-metalsmith\/","url_meta":{"origin":296323,"position":5},"title":"How to Make a Simple CMS With Cloudflare, GitHub Actions and Metalsmith","date":"May 14, 2020","format":false,"excerpt":"Let\u2019s build ourselves a CMS. But rather than build out a UI, we\u2019re going to get that UI for free in the form of GitHub itself! We\u2019ll be leveraging GitHub as the way to manage the content for our static site generator (it could be any static site generator). Here\u2019s\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Artboard.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296323"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/266402"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=296323"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296323\/revisions"}],"predecessor-version":[{"id":296911,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296323\/revisions\/296911"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/296339"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=296323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=296323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=296323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}