Browse Source

feat(onboarding): streamline installation

improve welcome post archetype & auto-start site server
Josh Habdas 2 years ago
Signed by: jhabdas GPG Key ID: B148B31154C75A74
3 changed files with 68 additions and 19 deletions
  1. +56
  2. +12
  3. +0

+ 56
- 12
archetypes/ View File

@ -11,46 +11,90 @@ images = [
] # overrides site-wide open graph image
Welcome to After Dark. Before continuing please adjust your n class="sb">`post` archetype. Archetypes are located in the `archetypes` directory of your site.
Before continuing please create a post archetype. Archetypes are located within markdown files in the `archetypes` directory of your site:
If the file does not exist yet, copy it from the After Dark post archetype:
└── flying-toasters
├── archetypes
│   ├──
│   └──
├── content
If `` does not exist yet, copy it from the After Dark default:
$ cd flying-toasters
$ cp themes/after-dark/archetypes/ archetypes/
Once created, edit `` from your `archetypes` directory to remove the content below the {{< external href="" text="Front Matter" />}} and try generating a new post to serve:
Make some changes to `` then use `hugo` to generate a new post:
$ nano archetypes/
$ hugo new post/
$ hugo serve --navigateToChanged
$ hugo serve --buildDrafts --navigateToChanged
Archetypes help establish defaults for your {{< external rel="help" target="_self" href="http://localhost:1414/feature/custom-layouts" text="Custom Layouts" />}} and other content types. To learn more about them visit {{< external href="" text="Archetypes in Hugo" />}}.
You have now created a post using {{< external href="" text="Archetypes in Hugo" />}}. Archetypes establish defaults for new content like posts. Create new archetypes when creating [Custom Layouts](http://localhost:1414/feature/custom-layouts) to help maintain consistency within your content.
{{< hackcss-alert type="info" >}}
<strong>Note:</strong> This text appears below the {{< external href="" text="Summary Split" />}}.
<strong>Note:</strong> This {{< external rel="help" target="_self" href="http://localhost:1414/shortcode/alert/" text="Alert" />}} appears below the {{< external href="" text="Hugo Summary Split" />}}.
{{< /hackcss-alert >}}
After Dark features a {{< external rel="help" target="_self" href="http://localhost:1414/feature/module-system" text="Module System" />}} and provides a number of optional add-on modules specifically designed to enhance your site. For example, here's a `canvas` animation made possible using the {{< external rel="help" target="_self" href="http://localhost:1414/module/fractal-forest" text="Fractal Forest" />}} module:
In addition to alerts After Dark includes a number of other [Shortcodes](http://localhost:1414/shortcode/) and other useful [Features](http://localhost:1414/feature/) such as its [Module System](http://localhost:1414/feature/module-system/).
![BPG animation example](/bpg/cinemagraph-6.bpg)
Module System gives After Dark sites the ability to add enhanced functionality using [Modules](http://localhost:1414/module/) like this one, which uses the [Fractal Forest](http://localhost:1414/module/fractal-forest/) module to decode and render a BPG image animation otherwise not possible in most browsers:
Fractal Forest uses Fabrice Bellard's {{< external href="" text="BPG Image format" />}} and gives After Dark the ability to render BPG-encoded images such as the above animation, which is ~98% smaller in filesize than its GIF counterpart.
![BPG animation example](/bpg/cinemagraph-6.bpg)
If you do not see the above animation, you may install the module yourself or simply reinstall After Dark using the provided {{< external rel="help" target="_self" href="http://localhost:1414/feature/quick-installer" text="Quick Installer" />}}.
If you do not see the above animation, you may install the [Fractal Forest](http://localhost:1414/module/fractal-forest/) module yourself or reinstall After Dark using the [Quick Installer](http://localhost:1414/feature/quick-installer/) for instant setup.
To learn about other modules and features please spend some time reviewing the {{< external rel="help" target="_self" href="http://localhost:1414/feature/online-help" text="Online Help" />}} linked here and also made available at {{< external href="" />}}.
Review the [Online Help](http://localhost:1414/) to learn about other useful features such as the [Section Menus](http://localhost:1414/feature/section-menu) navigational aid, responsive [Post Images](http://localhost:1414/feature/post-images/"), offline [Fuzzy Search](http://localhost:1414/feature/fuzzy-search/) and more.
If online help is not running, you may start it with the following command:
If Online Help isn't running, start with the following:
$ cd flying-toasters
$ ./themes/after-dark/bin/help
Here're some cheat sheets for you to reference as you get started.
After Dark Scripts:
cd flying-toasters/themes/after-dark
./bin/upgrade # check for updates and upgrade
./bin/help # start online help docs
./bin/install # run the quick installer
cd ../../..
Hugo Commands:
hugo # build site with default settings
hugo --minify # build with minified sources (hugo 0.45 and above)
hugo --config # build with custom config
hugo --templateMetrics # generate template metrics
hugo new # generate page content
hugo new post/ # generate new post content
hugo serve # serve locally with default settings
hugo serve --buildDrafts --navigateToChanged # serve with drafts for editing
hugo serve --buildExpired # serve locally showing expired content
hugo serve --disableLiveReload # serve locally w/live reload disabled
hugo list drafts # list draft content
hugo list expired # list expired content
hugo list future # list future content
hugo [serve] --debug # build or serve hugo with debug info
hugo [command] --help
Thank you for choosing After Dark.

+ 12
- 6
bin/install View File

@ -96,7 +96,7 @@ update_archetypes () {
create_welcome_post () {
echo "Creating a helpful welcome post ..."
hugo new post/
hugo new post/
generate_help_docs () {
@ -108,11 +108,16 @@ generate_help_docs () {
hugo new --kind validate 1>/dev/null
serve_help_docs () {
serve_help () {
echo "Starting help server ..."
hugo serve --disableLiveReload --port 1414 1>/dev/null &
serve_site () {
echo "Starting site server ..."
hugo serve --buildDrafts --navigateToChanged 1>/dev/null &
echo "Welcome to the After Dark quick installer. Press CTRL-C at any time to abort."
@ -124,15 +129,16 @@ download_module "fractal-forest"
printf "${YELLOW}Installation successful!${NC}\n"
echo "Site created in $SITE_DIR_ABS"
echo "Site server started at http://localhost:1313/"
echo "To stop it run \"kill \$(ps aux | awk '/[h]ugo.*1313/ {print \$2}')\"."
echo "Help server started at http://localhost:1414/"
echo "To stop it run \"kill \$(ps aux | awk '/[h]ugo.*1414/ {print \$2}')\"."
echo "To start it again run \"./themes/after-dark/bin/help\"."
echo "Run \"cd $SITE_DIR && hugo serve --buildDrafts\" to start your site."
echo "To stop and restart it run \"./themes/after-dark/bin/help\"."
echo "Thank you for choosing After Dark."

+ 0
- 1
docs/config.toml View File

@ -5,7 +5,6 @@ paginate = 33 # Number of items to show before paginating
# Controls default theme and theme components
theme = [