BSM

Apr 24 2020

Featuring:

HWS+

HWS+ is an all new service from Hacking With Swift. As of writing, it has 3 courses, which each have a few sections. Until WWDC, HackingWithSwift will publish a new section to one of the 3 courses every day, which afterwards will be every few days.
I can say, after watching all the videos that are released, that they are from really high quality(not only the resolution, also the content🙂!), and are really recommended if you want to level up in your swift and iOS development skills.
Once you are there, be sure to check out the other courses they have here


How to add pages to a blog created using Publish

Note This article is a continuation of How to create a website using Publish, and if you haven't done that, please read that first. If you already have a working blog created with Publish, and you want to add pages, please read further.

Overview

When you google a blog about iOS, Swift or any other topics, the most blogs don't have just their blog posts. They typically also have a bio page, maybe a portfolio or a newsletter page. But in our blog, we only have the home page, and the pages for the tags, if you press on one of them.

In this article, I want to show you how to create a page that doesn't contain any blogpost, and you can just add your content.

Note: As of writing, I have not figured out how to add a css class to pages created in this way. As soon as I have figured it out, I wil let you know in the newsletter, and I will update the article

Creating the struct

On the internet, most pages have metadata. That data is taken by the browsers, and for the title, if specified for that in settings, it will show instead of the URL. You also specify there your description that will be shown in the search results of let's say Google.

To get started, please click on the folder that contains your main.swift file, and press cmd+N to create a new swift file. rename it to the name of the page, or any name that you think makes sense.

Once you have done that, please remove the import foundation line, and replace that with:

import Publish
import Plot

After that, please copy this code and past it under the import statements:

struct ExtraPagesContent {
    static func createAboutMeContent() -> Content {
        var content = Content()        
        return content
    }
}

As you can see, we create a struct that contains a static function named createAboutMeContent you can call it however you like, but I named it this way as we are creating about my content.

The function takes no parameter, but, it does return Content. This is the data type that has everything the metadata of your page needs to have. Think of a title, description, and of course, the body of your page. But that we will do later, first we will add the content we have access to now. That is the title and the description. Please add this code beneath var content = Content()

content.title       = "Your page title goes here."
content.description = "Your page description goes here."

That is the basic Meta information that you should have on your page. Now, if you just call Publish run in the terminal, nothing would show. We will change that soon, but I will show you first how you can create the Body of your page.

Creating the body of your page.

Now that we have the Meta data, the Content for this page, we can create the page itself. To do that, please copy this code, and past it beneath the struct you just created.

extension Node where Context == HTML.BodyContext {
    static func aboutMe() -> Node {
        .div(
        )
    }
}

This code creates a extension for Node. Node is an enum that contains all the HTML elements so that you can build your website. In here, I have already specified a div. Inside that, you can build your website. As I said above, as of writing, I don't know yet how to add the CSS stylesheet to use in that extension, but, you can, of course, add your inline style with the .style() property. You can also create a separate function for it, but I think it's easier to maintain if you have more pages, if every page has all its content in one file. But that is a preference that I have.

Showing the page on the site.

Now that you have the web page finished, we can add it to the blog. To begin with, please go back and add this line to the content function in your struct that you just created:

content.body = Content.Body(node: .hereComeTheNodeExtensionFunction())

Now that we have that in place, we can go to main.swift, there, we are going to change a few things in the settings of the publishing, generating the html and css, to be able to show that page. First, please remove this line:

try packageName().publish(withTheme: .yourThemeName)

with this:

try packageName().publish(using: [
    .addPage(Page(path: "/aboutme", content: AboutMeContent.createAboutMeContent())),
    .addMarkdownFiles(),
    .generateHTML(withTheme: .BDCFoundation)
])

This code will generate the html and add the extra page you just created.

Now we have that, we are going to add the page link to the header. to do that, above that line that we just replaced, is a struct, with your package name, and inside there is an enum. Please enter a new case, with the same spelling as the path you gave the page before, otherwise, it's not going to work. In my case, I would add this:

case aboutme

If you followed my steps correctly, you should now be able to run Publish run and click on the link in the header, and see your page.

I hope you now know how to create your own pages and make great website with Swift and Publish!!

Don’t forget that you can contact me email me at questions@bdev-code.nl for any questions, feedback or if you just wanted to say hi.