Using GitHub Template Repos to Jump-Start Static Site Projects

Leverage GitHub template repositories to streamline your static site generator projects and significantly reduce setup time. While most static site generators offer easy installation, project configuration remains a recurring task. This approach is especially beneficial if you frequently create similar projects, repeatedly recreating folder structures, copying configuration files, and boilerplate code.

Unlike forking, which utilizes another developer's code, template repositories allow you to reuse your own code, ensuring each new project maintains its own independent Git history.

This guide demonstrates setting up a streamlined workflow using an Eleventy project as an example (though adaptable to Hugo, Jekyll, Nuxt, or others). A completed example repository is available for reference.

Creating Your Template

Begin by creating a project directory using the command line:

cd ~
mkdir static-site-template
cd static-site-template

This navigates to your home directory, creates a new directory, and enters it.

Node Project Initialization

Eleventy requires Node.js, which allows JavaScript execution outside a web browser, and npm (Node Package Manager) for package installation. Assuming Node.js is installed, run:

npm init

This generates package.json, prompting you to provide project metadata.

Installing Eleventy

With package.json created, install Eleventy as a development dependency:

npm install -D @11ty/eleventy

This adds Eleventy to package.json and installs it to the node_modules folder. package.json ensures consistent project setup across different machines.

Eleventy Configuration

This tutorial uses a configuration that separates website source code from project files, includes an HTML document, CSS, and JavaScript. Create the necessary directory structure:

mkdir src src/css src/js
touch index.html css/style.css js/main.js

To configure Eleventy to use the src directory and copy css and js files, create .eleventy.js:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/css");
  eleventyConfig.addPassthroughCopy("src/js");
  return {
    dir: {
      input: "src"
    }
  };
};

Test the configuration by running:

npx @11ty/eleventy

This generates the website in the _site directory.

Building a Boilerplate Website

Create basic website content: Add the following to src/index.html:

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Static site template</title>
  <meta name="description" content="A static website">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">


  <h1 id="Great-job-making-your-website-template">Great job making your website template!</h1>
  <script src="js/main.js"></script>

Add basic styling to src/css/style.css:

body {
  font-family: sans-serif;
}

And a simple JavaScript function to src/js/main.js:

(function() {
  console.log('Invoke the static site template JavaScript!');
})();

Run npx @11ty/eleventy --serve to view the website locally.

GitHub Repository Setup

Initialize a Git repository:

git init

Create a .gitignore file to exclude _site and node_modules:

<code>_site/
node_modules/</code>

Create a GitHub repository (e.g., static-site-template). Then, push your local repository:

git add .
git commit -m "first commit"
git remote add origin <your_github_repo_url>
git push -u origin master</your_github_repo_url>

Enabling Template Repository

In your GitHub repository settings, enable the "Template repository" option. A "Use this template" button will appear, allowing you to create new projects based on your template.

Extending the Template

As you develop new projects using the template, add reusable components and improvements back to the template repository for future use.

Limitations

While beneficial for similar projects, template repositories may not be suitable for complex projects with external dependencies or vastly different requirements. Remember that changes to the template only affect future projects, not existing ones.

This enhanced guide provides a more comprehensive and structured approach to creating and utilizing GitHub template repositories for static site projects.

The above is the detailed content of Using GitHub Template Repos to Jump-Start Static Site Projects. For more information, please follow other related articles on the PHP Chinese website!