Old Site

Creating a new publish project.

When I set out to update my site from a Jekyll theme to Publish by John Sundell, I knew I was getting myself into some work. So I started by cloning the Publish repo and making a new Publish project. For those who don't know, Publish allows you to create a website made up entirely of Swift code and CSS. After cloning the repo, I went into terminal and typed the following:

mkdir chadarutherford.github.io
cd chadarutherford.github.io
publish new

This created a new Publish project for me to work with. Now I needed to insert a markdown file from my old portfolio site, to test how this worked. I immediately found out that no longer did I need to wrap my metadata tags with quotes. Publish converts the metadata to strings without enclosing it in quotes. Also I learned, that I had to update the date from 00:00:00 format to 00:00 format. Publish didn't like the last set of zeroes. Also any arrays you have inside your markdown files, need the brackets removed to work with Publish.

Once I was sure I had formulated my markdown documents correctly I entered the following in my terminal:

publish run

This started up the local server on my MacBook, and "published" my site, converting Swift code into HTML, and packaging everything up nicely into an output folder that is read by the browser for display.

So I had a "blog site". But this wasn't appealing as I wanted it to be much more than a blogging site. So I dove into some tutorials and found an excellent tutorial by Povilas Staškus, titled "Migrating from Jekyll to Publish: A site generator for Swift developers". After following his tutorial and developing my site, I wqas happy with the results..... almost. I took the basic template he developed and tweaked it to serve my purpose and found that by diving into the code and determining what was happening, It was all too easy to develop my site, fit for my needs using Swift code. After creating a PortfolioFactory that conforms to HTMLFactory, I was able to quickly transform the old site into a new portfolio site that I am more capable of maintaining.

The default setup made for the posts, only allowed the site to return all items (which was an array of all the markdown files in the project). This was inconvenient for me as I wanted my projects and blog posts on different pages. So after some research, I found that you can list items based on the tags you've assigned to them. Armed with this new knowledge, I tagged all my blog posts with the tag "Blog" and populated the blog posts section with this code:

.posts(
	for: context.items(
		taggedWith: "Blog",
		sortedBy: \.date,
		order: .descending
	),
	on: context.site,
	title: "Recent Projects"
),

After seeing that this worked well for my needs, I tagged all my projects with the tag "Project" and populated the same sections using the "Project" tag. That resulted in the following code for makeSectionHTML(for:context:) throws -> HTML:

if section.id == .projects {
	return HTML(
		.lang(context.site.language),
		.head(for: context.site),
		.body(
			.grid(
				.header(for: context.site),
				.sidebar(for: context.site),
				.posts(
					for: context.items(
						taggedWith: "Project",
						sortedBy: \.date,
						order: .descending
					),
					on: context.site,
					title: "Recent Projects"
				),
				.footer(for: context.site)
			)
		)
	)
} else if section.id == .posts {
	return HTML(
		.lang(context.site.language),
		.head(for: context.site),
		.body(
			.grid(
				.header(for: context.site),
				.sidebar(for: context.site),
				.posts(
					for: context.items(
						taggedWith: "Blog",
						sortedBy: \.date,
						order: .descending
					),
					on: context.site,
					title: "Recent Projects"
				),
				.footer(for: context.site)
			)
		)
	)
} else {
	return HTML(
		.lang(context.site.language),
		.head(for: context.site),
		.body(
			.grid(
				.header(for: context.site),
				.sidebar(for: context.site),
				.pageContent(.h1(.text(section.title))),
				.footer(for: context.site)
			)
		)
	)
}

The only remaining thing I had to do was get my images working. Since the markdown parser inside Publish wouldn't let me assign a default width to my images, when I could, I wrapped all images in an tag. Now I had my portfolio site up and running locally and it was looking exactly how I wanted it to. Finally it was time to make it live. So I followed a tutorial by David Collado Sela titled Automating deploy of your publish site to GutHub Pages. I deleted all the code inside my existing GitHub repo, that hosted my Jekyll site, and published my site to a new location, ```chadarutherford.io```. Now I have a live Publish site and it is much more easily maintainable.