BSM

Apr 13 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 create a website using Publish

Overview.

A couple of months back, John Sundell has launched his static site generation toolset. This lets you create a website using swift(you do need some HTML and CSS knowledge.) In this article, I want to show you how you can set up the project so that it's ready for you to customise.

install publish

In order to create a website in swift(the main reason was for blogs), you will have to install publish. To do that, there are 3 commands you should run on your machine.

Note: You do need Git installed on your machine in order for the first step to work.

To begin with type or copy-past this line into your terminal.

git clone https://github.com/JohnSundell/Publish.git

When that is complete we will go to the publish folder by typing this:

cd Publish

And then the last step, once we are in the Publish folder, is running this command:

make	

That command will install the Publish command line toon on your machine.

Generate a Website

To generate a simple website using publish, you first have to make a new folder. Once you created that folder, you can easily drag and drop you folder so that you can cd to that folder

Once your there, you should type

Publish new

When running that command, Publish will create a project for you as a Swift package with all the tools you need to create your blog: Ink, Plot and of course also Publish together with some other dependencies.

After that procces is done, you type open Package.swift to open the project to edit your website.

Before we go further, lets first see if your website now runs correctly. To do that, go back to the terminal, and make sure you are still in the same folder as where you create the website and type

Publish run		

That will run the website at a local host and it says which localhost exactly.

NOTE: When I first created the local host was this: https://localhost:8000. But, that wasnt working. what turned out, my localhost wasnt working at all. So if that is the case by you, and you don't get a webstie at a locahost url, try this one http://127.0.0.1: yourLocalhostNumber

If everything works correctly, you should see something like this:

Making the project editable

You most probably don't want to launch a website that looks like that, with that colour. But, as of now, we can't change anything. We don't have any files that we can modify so that the website layout will change. So that is what we will do now.

To get started, click on the Resources Folder, right click, and chose add folder. Name that folder hower you like. then, click on your newly created folder and press cmd+n( or right-click -> new File) to create a new file inside that folder, and rename it to styles.css make sure that it doesn't have the .swift file extension. #warning("here was I")

After that, go to this link and copy the content of that file, and replace the content of your newly created file with that content. Then, click on the folder sources -> yourWebsiteName and add a new file, call that file however you want, but make sure it's something that makes sense to be the theme file. When you did that, replace the content of that new file, with the content of the file at this link. The only thing left for us to do is rename some strings so that it will find the CSS file.

Renaming the strings and variables

In order to customize the theme, we need to tell Publish what the new theme is and where to find the CSS file. Be aware, this is a multi-step process, and I will tell you the steps as I took them. It could be it reads a bit weird, but I write it so it will be the easiest to reproduces for your self. I recommend you also take the same steps as I think its the most convenient as its a lot of steps, and this goes in most cases from top to button.

Okay, here are the steps:

  1. first we shoud rename the variable called foundation so that publish will see the new theme. So replace the variable now with MWTheme( you can also use your own name, but I will use the MW prefix as I called the website MyWebsite, I do write it like you also use the same names).
  2. Find private struct FoundationHTMLFactory... line, and replace the Foundation word, with the same prefix as you gave the Theme variable. In my case, MWHTMLFactory.
  3. Go up and find the variable that you just renamed. As you can see, its a computed varaible. Find the line that says: htmlFactory: FoundationHTMLFactory(), and replace the struct call to the name you just gave to the struct below.
  4. Find the makeIndexHTML function, and in there find the line .head(for: index, on: context.site), and replace that line, with this line: .head(for: index, on: context.site, stylesheetPaths: ["/styles.css"]),
  5. Find the makeSectionHTML function, and in there find the line .head(for: section, on: context.site), and replace that line, with this line: .head(for: section, on: context.site, stylesheetPaths: ["/styles.css"]),
  6. Find the makeItemHTML function, and in there find the line .head(for: item, on: context.site), and replace that line, with this line: .head(for: item, on: context.site, stylesheetPaths: ["/styles.css"]),
  7. Find the makePageHTML function, and in there find the line .head(for: page, on: context.site), and replace that line, with this line: .head(for: page, on: context.site, stylesheetPaths: ["/styles.css"]),
  8. Find the makeTagListHTML function, and in there find the line .head(for: page, on: context.site), and replace that line, with this line: .head(for: page, on: context.site, stylesheetPaths: ["/styles.css"]),
  9. Find the makeTagDetailsHTML function, and in there find the line .head(for: page, on: context.site), and replace that line, with this line: .head(for: page, on: context.site, stylesheetPaths: ["/styles.css"]),

Now we have done those steps, the only thing to do before you can customize the website, is going to the main.swift file in the sources->MyWebiste folder, and find the line that says:

try MyWebsite().publish(withTheme: .foundation)

Replace the .foundation with the varaible name you gave to the varaible at the top of the theme file.

Few, that were a lot of steps to take to be able to customize the publish theme. I hope this helps you with building/converting your blog to Publish because its a very handy and easy framework to work with. For sure if you HTML and CSS knowledge isn't that great!

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.