🏔 Alaska | Static-site Boilerplate

⚡ Fastest way to build HTML and CSS static sites.

You don't have to learn complicated tools to build simple websites in a modular way.

Alaska uses efficient technology that's similar to what you're used to.

Contents

1. Running Alaska
   1. Requirements
   2. Installing
   3. Commands
2. Build in Alaska
   1. Structure
   2. Gulpfile
3. Coding with Poh 🐻‍❄️
   1. Poh's Guide to Pug
   2. Poh's Guide to Sass
4. License (Read carefully)

Running Alaska

Running Alaska is quite simple. You just install all the npm dependencies and you're good to go.

But if you need some in-depth guidance, I'll hand it off to Poh, a friendly Polar Bear that will guide you on your journey to building in Alaska.

🐻‍❄️
LET'S GO!!!

Chill, Poh. They want instructions, not hype.

🐻‍❄️
Shut up. YOU! Let's go...

Requirements

🐻‍❄️
If you want to do any running in Alaska, you have to prepare.
And I'm not talking about warm clothes and water.
I'm taking about N-P-M ᵐᵒᵗʰᵉʳᶠᵘᶜᵏᵉʳ`

Here's what you need to have installed on your machine:

• NodeJS - Click to install.
• NPM Cli - Click to learn how to install if Node didn't already install it.
• Yarn (Optional) - Run: npm i -g yarn to install.
• Gulp Cli - Run npm i -g gulp-cli to install.

🐻‍❄️
Now we need to pull all the files from Github.
Go to your Projects folder cd ~/projects/ or whatever you use.
Then clone the project like this:

git clone [email protected]:pixelsbyeryc/alaska.git

If you have SSH

git clone https://github.com/pixelsbyeryc/alaska.git

In case you're cloning from HTTPS

Installing

🐻‍❄️
Now what you have the code on your computer,
we're going to install the dependencies.
It's as simple as:

yarn

If you like using yarn instead of npm, or...

npm i

If you prefer the bland outputs of npm. Your choice.

Commands

🐻‍❄️
There are two commands you can run:

yarn dev

Will watch the files for any changes and hotreload your browser.

yarn build

Will build your project under the folder /public

🐻‍❄️
Want to stop the terminal from running?
Press Control+C on your terminal. It'll stop the execution.

Build in Alaska

🐻‍❄️
To build in Alaska, you need to understand how the structure works.
We like to break our food, I mean, code in small portions, you feel me?

Lemme give you the ins-and-outs of this place...

Structure

🐻‍❄️
Here's your folder/file structure:

alaska
|   .gitignore
|   gulpfile
|   LICENSE    
│   package.json
│   README.md
|   yarn.lock
│
└───src
│   └───js
│   |   │   magic.js
│   |   └   ...
|   |   
│   └───sass
│   │   |   sassy.sass
│   │   └   ...
|   |   
│   └───views
|       └───_data
│       |   |   data.pug
│       |   └   ...
│       |   
|       └───_includes
│       |   |   head.pug
│       |   └   ...
│       |   
|       └───components
│       |   |   header.pug
│       |   |   footer.pug
│       |   └   ...
│       |   
|       └───layouts
│       |   |   base.pug
│       |   └   ...
│       |   
|       └───pages
│           |   index.pug
│           └   ...
│   
└───public
    └   ...

Source Files src

🐻‍❄️
Source files are the ones you'll be editing.

Once will you run yarn dev or yarn build, Gulp will automatically process your files and spill them into the public folder.

Public Files public

🐻‍❄️
Public files are ready for deployment.

They will have pretty and minified options for your JS and CSS files.
You can also set up in your Gulpfile.js to minify your HTMLs for a slimmer code.

Views src/views

🐻‍❄️
Views folder will encompass all your Pug files — your HTML.

If If you need help coding in Pug, check out Poh's Guide.

Let's go over them:

• Pages src/views/pages: This is where your single pages will live (eg: Home Page). You can add as many pages as you want. All of the .pug files here will be sent to the public folder.
• Layouts src/views/layouts: Layouts are used to set up the basic structure of a page. You can re-use layouts on as many pages as you want.
• Components src/views/components: Components help you to split up your code and make it more maintainable. You can also create components as Pug Mixins and pass data to them.
• Includes src/views/_includes: Includes are chucks of code, much like components: they help you split up your HTML and make it more maintainable. I usually use them for things like <head> ... </head>.
• Data src/views/_data: You can write JSON-like files with Pug and use them to iterate components so you don't have to write the same structure over and over and over again.

Styles src/sass

🐻‍❄️
Sass folder will encompass all your Sass files — your CSS.

For now, we only have our sassy.sass — which is the main file.
But we encourage you to create more files and organize them as you wish.

Note: Currently, Gulp only moves sassy.sass as sassy.css to the public folder. If you want to add another file to public, modify your Gulpfile.

If If you need help coding in Sass, check out Poh's Guide.

Scripts src/js

🐻‍❄️
Scripts folder will encompass all your JS.

For now, we only have one file called magic.js.
You can create as many files as you want.

Note: Currently, Gulp only moves magic.js to the public folder. If you want to add another js file to public, modify your Gulpfile.

Gulpfile

🐻‍❄️
Gulpfile uses functions to process specific files.

I'm lazy to keep writing this doc right now, so here's the file: gulpfile.js.
Check it out.

Coding with Poh 🐻‍❄️

🐻‍❄️
Coming soon!

Poh's Guide to Pug

🐻‍❄️
Coming soon!

Here's a preview of how a Pug file turns into an HTML file:

file.pug

body.class
    header.header
        nav.nav-links
            a(href="/", target="_blank") Link Text

    main.main
        section.section
            h1.heading.--huge Page Title
            p This is a paragraph.

file.html

<body class="class">
    <header class="header">
        <nav class="nav-links">
            <a href="/" target="_blank">
                Link Text
            </a>
        </nav>
    </header>
    <main class="main">
        <section class="section">
            <h1 class="heading --huge">
                Title
            </h1>
            <p> This is a paragraph.
        </section>
    </main>
</body>

Poh's Guide to Sass

🐻‍❄️
Coming soon!

License

😝 License to do whatever ᵗʰᵉ ᶠᵘᶜᵏ you want. Go nuts.