-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
89 additions
and
6 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css" integrity="sha384-oAOxQR6DkCoMliIh8yFnu25d7Eq/PHS21PClpwjOTeU2jRSq11vu66rf90/cZr47" crossorigin="anonymous"/><link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css"/><link rel="stylesheet" href="/Pure/styles.css"/><link rel="stylesheet" href="/all.css"/></head><body><div id="layout" class="pure-g"><div class="sidebar pure-u-1 pure-u-md-1-4"><div class="header"><div id="layout" class="pure-g"><div class="pure-u-md-1-1 pure-u-3-4"><h1 class="brand-title">Bitomule's learning shack</h1><h3 class="brand-tagline">My thoughts about iOS, technology or any other thing that comes to my mind.</h3></div></div><div id="layout" class="pure-g"><div class="pure-u-md-1-1"><a href="mailto:bitomule+blog@gmail.com"><i class="fas fa-envelope-open-text l-box social-icon"></i><a class="social-media" href="mailto:bitomule+blog@gmail.com">Email</a></a></div><div class="pure-u-md-1-1"><a href="https://www.linkedin.com/in/davidcolladosela/"><i class="fab fa-linkedin l-box social-icon"></i><a class="social-media" href="https://www.linkedin.com/in/davidcolladosela/">LinkedIn</a></a></div><div class="pure-u-md-1-1"><a href="https://github.com/bitomule"><i class="fab fa-github-square l-box social-icon"></i><a class="social-media" href="https://github.com/bitomule">GitHub</a></a></div><div class="pure-u-md-1-1"><a href="https://twitter.com/Bitomule"><i class="fab fa-twitter-square l-box social-icon"></i><a class="social-media" href="https://twitter.com/Bitomule">Twitter</a></a></div></div></div></div><div class="content pure-u-1 pure-u-md-3-5 pure-u-xl-6-10"><h2 class="post-title"><a href="/posts/getting-started-with-publish">Getting started with publish</a></h2><p class="post-meta">April 17, 2020</p><div class="post-tags"><a class="post-category post-category-blog" href="/tags/blog">Blog</a><a class="post-category post-category-publish" href="/tags/publish">Publish</a></div><div class="post-description"><div><h1>Getting started with publish</h1><p>As you may have seen <a href="https://blog.bitomule.com/posts/moving-blog-again/">I’ve moved my blog again</a> and I’m using. <a href="https://github.com/JohnSundell/Publish">Publish</a>) ,an static website builder. But, what does static mean?</p><h2>Static website</h2><p>Static means that the website does not change while it’s deployed. There is no backend logic deciding what to render. It also means:</p><ul><li>Cheaper hosting as is just serving HTML + CSS</li><li>Free hosting using Github pages</li><li>Speed</li><li>Some features are not possible</li></ul><p>My old blog was already working like an static blog in terms of features but I had to host it on my own NAS. The speed was not bad due to my blog not having much traffic but any traffic increase would have made it crazy slow.</p><h2>Publish</h2><p>Now that we know what Publish offers, let me say that it’s far from being the first option in the market and it’s also far from being the most used or the one with the biggest community. You have tons of alternatives to build an static website and it’s not so difficult to do a custom one just for your site.</p><p>So, why did I use Publish then?</p><p>There is one big difference, something that makes Publish different: it is written in Swift. Not only the website generation is Swift, even the HTML is written using Swift because it uses <a href="https://github.com/johnsundell/plot">Plot</a>. This made me think that at least I should give it a try.</p><p>The exploring Publish task stayed in my “someday list” for months until my NAS hosted blog went down (I deleted the wrong docker and I had to restore it again which took me hours). That was the trigger that made me try Publish and I will try to explain it all in a series of posts; let’s get started:</p><h2>Getting started</h2><p>The first thing you need to do is cloning and building Publish using:</p><pre><code>$ git clone https://github.<span class="property">com</span>/<span class="type">JohnSundell</span>/<span class="type">Publish</span>.<span class="property">git</span> | ||
| $ cd <span class="type">Publish</span> | ||
| $ make | ||
| </code></pre><p>And then adding just create the folder where you want your blog to live and run publish new:</p><pre><code>$ mkdir <span class="type">MyWebsite</span> | ||
| $ cd <span class="type">MyWebsite</span> | ||
| $ publish new | ||
| </code></pre><p>Now you can open the generated Package.swift and that will open your Website project.</p><h2>Basic project</h2><p>The first thing you will see once you open the Package is that it will fetch all the dependencies Publish uses including Ink, Plot…</p><p>It will look something like this:</p><img src="/images/getting-started-with-publish-1.png"/><p><strong>Content</strong> is the folder where your markdown files should live grouped by section (Publish groups by section). You can also include an index file although that was one of the first things I removed.</p><p><strong>Resources</strong> is the place where assets should live: CSS, custom fonts, images… It will get copied to your generated website.</p><p><strong>Sources</strong> Here you will find all the Swift code. Inside MyWebsite folder you will find main.swift. This is the entry point of the swift tool. I suggest keeping it just to trigger the publish command.</p><h2>Creating a template</h2><p>By default Publish uses an empty template called Foundation but it is really easy to create new a one.</p><ol><li>Inside Sources/MyWebsite (this will be the name of your own website) create a new folder using the name that will describe your Theme. In my case just BlogTheme.</li><li>Create a new swift file that will contain the theme factory</li><li>Inside create a struct that will implement HTMLFactory method</li></ol><pre><code><span class="keyword">struct</span> BlogHTMLFactory: <span class="type">HTMLFactory</span> { | ||
| </code></pre><p>This will tell you to implement all the missing methods. Each of this methods represents different parts of your website and you just have to return HTML from it.</p><p>For example, makeIndexHTML in my case looks like:</p><pre><code><span class="keyword">func</span> makeIndexHTML(for index: <span class="type">Index</span>, context: <span class="type">PublishingContext</span><<span class="type">Blog</span>>) <span class="keyword">throws</span> -> <span class="type">HTML</span> { | ||
| <span class="type">HTML</span>( | ||
| .<span class="call">lang</span>(context.<span class="property">site</span>.<span class="property">language</span>), | ||
| .<span class="call">head</span>(for: context.<span class="property">site</span>), | ||
| .<span class="call">body</span>( | ||
| .<span class="call">grid</span>( | ||
| .<span class="call">sidebar</span>(for: context.<span class="property">site</span>), | ||
| .<span class="call">posts</span>( | ||
| for: context.<span class="call">allItems</span>( | ||
| sortedBy: \.<span class="property">date</span>, | ||
| order: .<span class="dotAccess">descending</span> | ||
| ), | ||
| on: context.<span class="property">site</span> | ||
| ), | ||
| .<span class="call">footer</span>(for: context.<span class="property">site</span>) | ||
| ) | ||
| ) | ||
| ) | ||
| } | ||
| </code></pre><p>If you try to copy paste this into your own blog it will fail. Why? I am already using some of the swift power to create new HTML components. Grid, for example, is a reusable component that takes any amount of nodes and displays them in a grid using pure css.</p><p>How can you create your own custom node?</p><p>Just create a new Nodes folder inside your theme folder and create an extension of Node type. Node+Grid.swift for example.</p><p>Inside this file extend Node where Context == HTML.BodyContext because there is where you want this component to work. Then inside create your static function taking a variadic parameter of Node type and returning also a Node. Like this:</p><pre><code><span class="keyword">extension</span> <span class="type">Node</span> <span class="keyword">where</span> <span class="type">Context</span> == <span class="type">HTML</span>.<span class="type">BodyContext</span> { | ||
| <span class="keyword">static func</span> grid(<span class="keyword">_</span> nodes: <span class="type">Node</span>…) -> <span class="type">Node</span> { | ||
| .<span class="call">div</span>( | ||
| .<span class="call">id</span>(“layout”), | ||
| .<span class="call">class</span>(“pure-g”), | ||
| .<span class="call">group</span>(nodes) | ||
| ) | ||
| } | ||
| } | ||
| </code></pre><p>For my blog I used the already amazing work done by <a href="https://twitter.com/PovilasStaskus">@PovilasStaskus</a> and just changed some details to fit what I wanted for my own blog.</p><p>Following this approach of small and reusable components you will compose each of the screens needed for your blog.</p><p>Remember that each of the functions will give you all the information you need to create your HTML.</p><h2>Using your custom theme</h2><p>Ok, you have finished your theme but your site is still using default Foundation theme.</p><p>In order to use the new theme you have created, you have to extend Theme type where Site == YourSiteType like:</p><pre><code><span class="keyword">extension</span> <span class="type">Theme</span> <span class="keyword">where</span> <span class="type">Site</span> == <span class="type">MyWebsite</span> { | ||
| <span class="keyword">static var</span> blog: <span class="type">Self</span> { | ||
| <span class="type">Theme</span>(htmlFactory: <span class="type">MyWebsiteHTMLFactory</span>()) | ||
| } | ||
| } | ||
| </code></pre><p>Now you can use this new blog variable inside main on the publish method. Change .Foundation with .blog or the name you defined and you’re ready.</p><h2>Running your site</h2><p>Now you have multiple options to see your blog. We will see in future posts how to deploy to remote, but right now you can run in Xcode to generate the HTML files in output folder or go to terminal and run:</p><pre><code>publish run | ||
| </code></pre><p>This will start a python web server so you can see your website running locally and do all the changes you need to do without pushing to a remote server.</p><p>In the next blog post I will explain how you can publish your blog for free in GitHub pages.</p></div></div></div><div class="footer pure-u-1"><div class="pure-u-1">© 2020 Bitomule's learning shack</div><div class="pure-u-1">Generated using <a href="https://github.com/johnsundell/publish">Publish</a>. Written in Swift</div><div class="pure-u-1"><a href="/feed.rss">RSS feed</a></div></div></div></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"><url><loc>https://blog.bitomule.com/posts</loc><changefreq>daily</changefreq><priority>1.0</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/moving-blog-again</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/my-journey-from-rxswift-to-combine</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/kitchenorder</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/realm-type-safe-update-2</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/how-ynab-changed-my-life</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/tracking-your-site-metrics-without-sacrifycing-user-privacy</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/using-portainer-to-manage-container-station</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/running-a-website-from-your-qnap-nas</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/calculate-text-size</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/drafts/My%20omnifocus%20shortcuts%20for%20iOS</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/drafts/getting-started-with-publish</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url></urlset> | ||
| <?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"><url><loc>https://blog.bitomule.com/posts</loc><changefreq>daily</changefreq><priority>1.0</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/getting-started-with-publish</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/moving-blog-again</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/my-journey-from-rxswift-to-combine</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/kitchenorder</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/realm-type-safe-update-2</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/how-ynab-changed-my-life</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/tracking-your-site-metrics-without-sacrifycing-user-privacy</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/using-portainer-to-manage-container-station</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/running-a-website-from-your-qnap-nas</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/posts/calculate-text-size</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url><url><loc>https://blog.bitomule.com/drafts/My%20omnifocus%20shortcuts%20for%20iOS</loc><changefreq>monthly</changefreq><priority>0.5</priority><lastmod>2020-04-17</lastmod></url></urlset> |
Oops, something went wrong.