Skip to content

Instantly share code, notes, and snippets.

@plugnburn

plugnburn/README.md

Last active March 27, 2016 16:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save plugnburn/927c4d14db1ddcacc491 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save plugnburn/927c4d14db1ddcacc491 to your computer and use it in GitHub Desktop.
Download ZIP
Psto: a single package.json to scaffold and run your single-post web page in no time
Raw
README.md

Psto

This is a no-brainer to get your single-post web page up and running. Just have to have Node and NPM installed, and /bin/sh pointing to Bash shell. Styling is powered by 999.css.

Steps:

  1. Place the below package.json into an empty directory and enter this directory in your command line prompt.
  2. Run npm run scaffold.
  3. Edit domain, title and author in the config section of your package.json. The domain may be either a Surge subdomain or your own (please refer to the Surge docs). If you're going to host your page yourself, you may leave domain empty.
  4. Edit your post in the post.md file that appeared in the directory after the scaffolding. The format to write is Markdown.
  5. Whenever you're ready, just run npm run build, if you're going to host your page yourself, or npm run deploy for hosting on Surge (enter your Surge login/password if prompted). In both cases, output will be stored in dist/ directory.
  6. ???
  7. PROFIT!

Feel free to edit src/index.html according to your particular needs.

P.S. If you need to take down your page when hosting on Surge, just run npm run undeploy.

Raw
package.json
{
"name": "psto",
"description": "A single-post web page boilerplate",
"author": "plugnburn",
"version": "0.1.0",
"config": {
"domain": "",
"title": "My Post Title",
"author": "A Great Author",
"scaffoldCssUrl": "http://999.surge.sh/999.css",
"scaffoldTplSource": "<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>%%title%%</title><meta name=viewport content=\"width=device-width,initial-scale=1.0,target-densitydpi=device-dpi\"><meta name=author content=\"%%author%%\"><link rel=stylesheet href=\"999.css\"></head><body><div class=\"fr\"><aside class=\"box gss fcolor-inv\"><h3>%%title%%</h3><p>Author: %%author%%</p></aside><main class=\"box fcolor-main\">%%content%%</main></div></body></html>"
},
"scripts": {
"scaffold-populate": "npm install && mkdir -p src && touch post.md && echo node_modules > .gitignore",
"scaffold": "npm run -s scaffold-populate && wget $npm_package_config_scaffoldCssUrl -O src/999.css && echo -n \"$npm_package_config_scaffoldTplSource\" > src/index.html",
"prepare": "mkdir -p dist && cp -rd src/* dist/",
"compile-content": "html=$(<dist/index.html);html=${html//%%content%%/$(marked < post.md)};html=${html//%%title%%/$npm_package_config_title};html=${html//%%author%%/$npm_package_config_author};echo -n $html>dist/index.html",
"build": "npm run -s prepare && npm run -s compile-content",
"deploy": "npm run -s build && mv dist/index.html dist/200.html && surge dist $npm_package_config_domain",
"undeploy": "surge teardown $npm_package_config_domain"
},
"dependencies": {},
"devDependencies": {
"marked": "^0.3.5",
"surge": "^0.17.7"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment