Publish Website - Part 1

I had a static website built with Hugo and a lot of custom JavaScript I've written. Mainly to apply syntax highlighting while building instead of in the browser. While this all worked quite well I didn't really keep it up to date and got myself into a state where I couldn't even update the npm modules anymore.
That's when I decided I need to redo my website.

Being an iOS developer I quickly decided to use a framework where I know the ecosystem and would have an easier time to keep it up to date. That's why I decided to use Publish.
It's really nice to write Swift code to generate a website instead of having to write template files with a mixture of HTML and Stencil.

How to start

First we have install publish. We can do this easily by running brew install publish from the command-line.

Then we create a new folder and open it.

mkdir -p path/to/website-folder
cd path/to/website-folder

To get the starter template of a publish project we run publish new.

Now we're already able to see our website in the browser with publish run.

We want to track our files with git so we execute the following.

git init
echo '/Output' >> .gitignore
git add .
git commit -m 'Initial project setup'

We're not required to ignore /Output from git but we will configure automatic building for our website and create it on demand.

Customizing the website

Now we open the project with Xcode: xed .

The first file to look at is Sources/*/main.swift here most of the global configuration can be done.
Afterwards in Content/posts new files can be added and they'll appear on our website. Images and other static resources should be added to Resources.

The website currently uses the Foundation theme. While this is a good foundation we want to customize it.

cp -R .build/checkouts/publish/Resources/FoundationTheme Resources
cp .build/checkouts/publish/Sources/Publish/API/Theme+Foundation.swift Sources/*/

These commands copy the FoundationTheme into our websites sources and we can start customize it.
In Theme+Foundation there is a FoundationHTMLFactory which is the basis for generating all HTML files.
In Resources/FoundationTheme/styles.css we can change the appearance of our HTML.

If you want to create a landing page for an App. Checkout this Publish Theme.

Finalizing

Now we commit everything and create a repository on GitHub for our page and follow the steps described there.
Finally we can git push our code.

Next

Now that we have created a website we want it to be available on the internet. This is what we do in the next blog post.