A minimalist framework for creating a website like it's 1999.
- A computer with the internet, a text editor, and a web browser
- npm
- Open terminal
npm install -g @htmlgoddess/cli
This will install the command line utility.htmlgoddess create path/to/your/new/site- follow the prompts and you should be up and running in no time.
- refactor: isolate tests.
- add: "host" command.
- add: style choose command to allow the user to change theme after creation.
- feat: Spell checker.
- feat: auto commitizen hook to trigger when committing.
- feat: proofread commands.
- feat: "domain" command.
- feat: downloadable executable.
- refactor: Swap CNAME for yaml config for hosting.
- task: coverage
- convert "docs" to configurable variables
- task: make sure the watcher doesn't leak memory.
- bug: cli.action still outputting to console during tests.
- feat: GUI
That's ok. Check out this video to get started.
When you run npm start and it will give you the following options.
- Files in the "src" folder are compiled (printed) to static HTML files in the "docs" folder.
src/templatesfolder contains the templates. These are compiled with the content folder to generate your static HTML pages.src/contentfolder contains your site content, which is kept in html files that are chunks of HTML code.- When you run
npm run print(or select print from terminal menu), it will compile your content and templates into static HTML files and recreate the docs folder. (NOTE: Everything in docs gets overwritten so only save content in your src directory!) - You can test your site locally by running the "serve" command from the menu.
- When you are ready to deploy your site, just do
npm run save && npm run publish - You can then point your web server to "docs" whether it be apache, git pages, nginx, or anything.
- You can add any stylesheet that targets plain HTML elements and it should work :)
- Tags in the template that are self closing like
<head />or<main />will search for template files matching that same name; either a directory with an index html likemain/index.htmlor simply a filemain.html- Tags do not have to be standard HTML. If you make a template foo.html in the templates folder, you can include a
<foo />tag and it will replace the contents of foo. - The template compiling is recursive so you can use templates within templates, however, the nested templates need to be files contained within or adjacent to the parent template. Otherwise it will just be ignored.
- Tags do not have to be standard HTML. If you make a template foo.html in the templates folder, you can include a
- The
<content/>tag is special and will either pull in a template as the same name of the file (with dir) or the main template ('templates/index.html). - When you create the pages you want in the content dir. Directories relative to there will show up in your site with the same path. This structure allows for self organizing folders and urls.
- No JS
- No attributes except basic href etc.
- No classes. This is what allows you to add any stylesheet that targets vanilla css
- No SASS/SCSS/LESS. This should not be necessary with simple HTML elements
- No React, Angular, or anything else.
- Or not, you can hack anything you want.
HTML was designed to be simple, and for ordinary people to create and consume things on the internet. The web is pretty awesome today but also has gotten pretty complex and it's leaving a lot of people behind. This CMS gets back to basics to give people a way to express themselves freely and easily.
- The framework tries to leverage as much existing technology and standards as it can.
- HTML is used for everything (as the HTML Goddess has commanded) instead of proprietary template tags and other special syntax. The templating system searches for self closing HTML tags and replaces them with associated templates or content.
- The file system is leveraged for both finding/naming templates and url routing.
- Git serves as the actual database for the CMS along with the HTML files in content and templates.
- The site "prints' ' to the "docs' ' folder, and then you "publish" to git, where you can set up github pages. It's agnostic of the web server so you can actually take the files in the docs folder and plunk them anywhere you want and point a web server at them.
- Tags are intended not to need classes or attributes. This allows new themes to be seamlessly dropped in. You can think of vanilla HTML as the interface for applying styling.
- Using JavaScript is discouraged as it shouldn't be unnecessary, though there's nothing in the framework that prevents you using it.
- You can ignore everything I just wrote and do whatever you want. It's the internet!
- Dependencies acting weird:
Lerna does some things under the hood to cross-link Dependencies. If you install a new module and things stop working trylerna bootstrapfrom the root. - Test directory not cleaning up. If a test fails it might prevent the test directory from cleaning up. In that case run
npm run clean-test-dirwhich will remove it manually.
- run tests in packages/cli to make sure everything's up to snuff
npm run test - Commit changes to the mono repo
npm run commitand follow the prompts - lerna publish --force-publish This will publish to NPM as well as push a tag to git