Git Product home page Git Product logo

static-site-express's Introduction

static-site-express

static-site-express is a simple Node.js based static-site generator that uses EJS and Markdown. You can deploy your static site to the Netlify cloud computing platform. Deploy, customize, and write your own blog.

Post updated on September 13, 2019 Current version: 4.1.0

Documentation

Install static-site-express

You have to options:

a) Clone my repository:

git clone https://github.com/SalsaBoy990/static-site-express name-of-your-site

b) Use the 'Deploy to Netlify' button on the example website

Build your site locally

a) Build site from ./src into ./public folder:

npm run build

b) Serve website on localhost:4000:

npm run serve

c) Or you can watch for changes and trigger re-build with nodemon:

npm run watch

You need to add sudo before the commands on Linux system.

Important notes

  • nodemon not trigger re-build on Linux on file changes (this behavior was experienced on Ubuntu 18.04 LTS Bionic Beaver)
  • On Ubuntu, you can run npm run watch-exp command which uses the chokidar package. Experimental!

Inspect package.json for more info. The ./lib folder contains the JavaScript files used for building and serving the website. Check them out.

The site.config.js file contains some of the site properties (like site title, author, description, social media links etc.) that are used in the EJS partials.

Register at Netlify and publish your website

  • Register on Netlify, and see this tutorial video if you are unfamiliar with the procedure. You can publish your site in a minute.

  • The netlify.toml configuration file contains important properties:

[build]
  base    = "/"
  publish = "public"
  command = "npm run build"

The base path, the build command, and the publish directory. You can keep those settings.

In the _headers file you can specify the HTTP headers and set Content Security Policy (CSP) rules for the Netlify server. Currently, CSP rules are not set because I don't know which domains you want to whitelist when you create your own website. I recommend you the CSP Evaluator by Google.

The _redirects file is currently empty. When you have a custom domain, you can make a redirect from *.netlify.com to your custom domain.

sitemap.xml is self-explanatory. Empty by default. robots.txt is for search engines. Default settings:

# Disallow admin page
User-agent: *
Disallow: /admin/

# Disallow message-sent page
User-agent: *
Disallow: /message-sent/

# Rule 3
User-agent: *
Allow: /

For Google Search Console verification, you should have an HTML file from Google included in the root of your Netlify publish folder (in our case, public). The build script copies this file from ./src to ./public. Change line 87 in ./lib/build.js:

ssg.copyRootFile('FILENAME.html', srcPath, distPath)

Alternatively, you can use the Express server app on Heroku (not recommended)

A Procfile is already supplied for you with the command to build the site, and after that, to run the app server:

web: npm run heroku

You need improve security! I already set security headers with the helmet npm package, just 2 lines:

// Set Security Headers.
const helmet = require('helmet')
app.use(helmet())

Also, you can set Content Security Policy (CSP) rules using the helmet-csp package.

Keep in mind that the contact form on the example site only works on Netlify!!

Q&A

If you have a problem or a question about static-site-express, open an issue here.

PS. The idea of making a static site generator in Node.js came from this good article by Douglas Matoso: Build a static site generator in 40 lines with Node.js.

static-site-express's People

Contributors

webandras avatar vairakkumaar-svs-hf avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.