Static site generators

​

Benefits of static site generators

• Templating: A templating system lets you define the structure and layout of your website using reusable templates and components that can be used across multiple pages. This means you don’t need to duplicate or update common elements across multiple pages manually. This also separates your content from the design and presentation layer, so you can focus on writing and updating the content.
• Automation: If your site includes content from various sources, such as Markdown files or data files, a static site generator can automate the process of converting your content into HTML files. Tasks like minification, optimization, and asset bundling can also be automated. All of this saves you time and reduces the chances of errors, by allowing you to create and optimize your site without manually performing each task.
• Version control: Static site generators integrate with version control systems like Git, so you can track changes, collaborate with others, and easily revert to previous versions if needed.
• Incremental Builds: With incremental builds, when you make changes and generate a new output, only the files that have changed since the last build are regenerated. Many static site generators support incremental builds, improving the build time for larger sites and small updates.

​

Using a static site generator

1. Choose your SSG: There are many SSGs available. Selecting the one that best suits your needs is the first step. To build and host the site with Sevalla’s Static Site Hosting, choose one that uses Node.js for the build process. Below, we have a list of SSG’s ready to use at Sevalla.
2. Set up a local development environment: Install the necessary dependencies, including the SSG itself, any required programming languages, and a code editor.
3. Create your new site: In your SSG, create the new site. This generates the basic directory structure and configuration files required for the project.
4. Configuration: Set up your site’s configuration to customize the site structure and how the generator processes your source files. This file may contain settings like the input and output directories, template paths, metadata, plugin configurations, etc.
5. Templating: Create templates and layouts that define common elements and structure for your pages, such as headers, footers, navigation menus, etc.
6. Add content and assets: Create or gather existing content using Markdown or other supported formats. Each page generally corresponds to a file within the content directory. Assets will likely be stored in a separate directory from the content files.
7. Styling: Modify the CSS or preprocessor files (e.g. SASS or LESS) to apply custom styles to your site. Some SSGs also have themes available that can be installed and customized for styling.
8. Build and preview locally: Run the build command provided by the SSG to compile your website. The SSG processes your templates, converts your content files to HTML, and generates the static files (HTML, CSS, and JavaScript). If applicable, it will also perform tasks such as minification, optimization, and asset bundling. Use this setp to ensure that everything looks and functions as intended.
9. Create your Git repository: Use Git to create your repository, then commit and push your new site to your new Git repository.
10. If you will be deploying the site to Sevalla without running the build at Sevalla, the files you commit to your repository need to be the output from the build (the HTML, CSS, and JavaScript files).
11. If the site is to be built at Sevalla, the files you commit to your repository need to be the content, assets like images or other media, and the SSG files (or configurations files that will pull in the dependencies for the build).
12. Deploy your new static site: In Sevalla, add a new static site and connect it to your Git repository to deploy your site to Sevalla’s 260+ CDN locations.
13. Maintain and update: As you continue to work on your site, make sure to follow best practices for version control, regularly commit changes, and stay updated with the latest versions of the SSG and its dependencies. This ensures a smooth development process and allows you to take advantage of new features and bug fixes.

​

Static site generator compatibility

• It uses a language other than Node.js to build the site (e.g. PHP).
• It requires server-rendering to serve some or all of the site.
• It requires a database connection.
• It serves dynamic content.
• It requires sessions or authentication managed on the server-side.

SET NODE_OPTIONS=--openssl-legacy-provider && vuepress build src

npm install hugo-bin serve --save-dev

{
  "scripts": {
    "build": "hugo"
  }
}