From 690f583e95e8035b2c6f7022d725a6d0d83ba703 Mon Sep 17 00:00:00 2001 From: Bastian de Byl Date: Sat, 23 Dec 2017 22:30:17 +0100 Subject: [PATCH 1/3] Added gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..141c87c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +themes/* From 385383a6c389143b9073e34c1dba60cc980a40a4 Mon Sep 17 00:00:00 2001 From: Bastian de Byl Date: Sat, 23 Dec 2017 22:35:31 +0100 Subject: [PATCH 2/3] First setup using tranquilpeak with post. --- .gitignore | 1 + config.toml | 196 +++++++++++++++++++++++++++++- content/post/humble-beginnings.md | 70 +++++++++++ themes/tranquilpeak | 1 - 4 files changed, 265 insertions(+), 3 deletions(-) create mode 100644 content/post/humble-beginnings.md delete mode 160000 themes/tranquilpeak diff --git a/.gitignore b/.gitignore index 141c87c..f3c4260 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ themes/* +test.md diff --git a/config.toml b/config.toml index e4b7418..3c55030 100644 --- a/config.toml +++ b/config.toml @@ -1,3 +1,195 @@ -baseURL = "http://example.org/" +# Tranquilpeak +baseURL = "https://basdb.net/" languageCode = "en-us" -title = "My New Hugo Site" +defaultContentLanguage = "en-us" +title = "basdb" +theme = "hugo-tranquilpeak-theme" +# disqusShortname = "basdb-site" +# googleAnalytics = "UA-123-45" +paginate = 7 +canonifyurls = true + +[permalinks] + post = "/:year/:month/:slug/" + +[taxonomies] + tag = "tags" + category = "categories" + archive = "archives" + +[author] + name = "Bastian de Byl" + bio = "This site serves both as my portfolio and collections of personal projects." + job = "Software Engineer" + location = "New England" + # Your profile picture + # picture = "https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png" + +# Menu Configuration +[[menu.main]] + weight = 1 + identifier = "home" + name = "Home" + pre = "" + url = "/" +[[menu.main]] + weight = 2 + identifier = "categories" + name = "Categories" + pre = "" + url = "/categories" +[[menu.main]] + weight = 3 + identifier = "tags" + name = "Tags" + pre = "" + url = "/tags" +[[menu.main]] + weight = 4 + identifier = "archives" + name = "Archives" + pre = "" + url = "/archives" +[[menu.main]] + weight = 5 + identifier = "about" + name = "About" + pre = "" + url = "/#about" + +[[menu.links]] + weight = 1 + identifier = "github" + name = "GitHub" + pre = "" + url = "https://github.com/bdebyl" +# [[menu.links]] +# weight = 2 +# identifier = "stackoverflow" +# name = "Stack Overflow" +# pre = "" +# url = "https://stackoverflow.com/users/636472/kakawait" + +# [[menu.misc]] +# weight = 1 +# identifier = "rss" +# name = "RSS" +# pre = "" +# url = "/index.xml" + +[params] + # Customize date format use to render blog post date, categories and other + # You must use date format used by Go Time package https://golang.org/pkg/time/ + # Months (not work with short month like "jan", "feb", etc) are translated if translation exists on i18n folders + # Default format is: January 2, 2006 + dateFormat = "2 January 2006" + + # Global keywords configuration. Following keywords will be add to every pages + # keywords = ["development", "next-gen"] + + # Syntax highlighter, possible choice between: "highlight.js" (recommanded) and "prism.js" (experimental) + # You can comment it to disable syntax highlighting + syntaxHighlighter = "highlight.js" + + # Hide sidebar on all article page to let article take full width to improve reading, and enjoy wide images and cover images. (true: enable, false: disable) + clearReading = true + + # Define categories will create hierarchy between parents: `categories = ["foo", "bar"]` will consider "bar" a sub-category of "foo". + # If false it will flat categories. + hierarchicalCategories = true + + description = "Hugo tranquilpeak theme demo" + + # Customization + # Define the behavior of the sidebar + # 1: Display extra large sidebar on extra large screen, large sidebar on large screen, + # medium sidebar on medium screen and header bar on small screen and + # extra large sidebar is swiped on extra large screen and large sidebar on all lower screen (default) + # 2: Display large sidebar on large screen, medium sidebar on medium screen and + # header bar on small screen and large sidebar is swiped + # 3: Display medium sidebar on large and medium screen and header bar on small screen and + # medium sidebar is swiped + # 4: Display header bar on all screens, extra large sidebar is swiped on extra large screen and + # large sidebar is swiped on all lower screens + # 5: Display header bar on all screens and large sidebar is swiped on large screen + # 6: Display header bar on all screens and medium sidebar is swiped + sidebarBehavior = 1 + + # Your blog cover picture. I STRONGLY recommend you to use a CDN to speed up loading of pages. + # There is many free CDN like Cloudinary or you can also use indirectly + # by using services like Google Photos. + # Current image is on AWS S3 and delivered by AWS CloudFront. + # Otherwise put your image in folder `static/_images/` (development) or in `source/assets/images/` if you can't or don't want to build the theme, + # and use relative url : `your-image.png` + coverImage = "cover.jpg" + + # Display an image gallery at the end of a post which have photos variables (false: disabled, true: enabled) + imageGallery = true + + # Display thumbnail image of each post on index pages (false: disabled, true: enabled) + thumbnailImage = true + # Display thumbnail image at the right of title in index pages (`right`, `left` or `bottom`) + # Set this value to `right` if you have old posts to keep the old style on them + # and define `thumbnailImagePosition` on a post to overwrite this setting + thumbnailImagePosition = "bottom" + # Automatically select the cover image or the first photo from the gallery of a post if there is no thumbnail image as the thumbnail image + # Set this value to `true` if you have old posts that use the cover image or the first photo as the thumbnail image + # and set `autoThumbnailImage` to `false` on a post to overwrite this setting + autoThumbnailImage = true + + # Your favicon path, default is "/favicon.png" + # favicon = "/favicon.png" + + # Header configuration + # The link at the right of the header is customizable + # You can add a link (as an icon) at the right of the header instead of the author's gravatar image or author's picture. + # By default, author's gravatar or author's picture is displayed. + # url: /#search + # icon: search + # class: st-search-show-outputs + + # Custom CSS. Put here your custom CSS files. They are loaded after the theme CSS; + # they have to be referred from static root. Example + # [[params.customCSS]] + # href = "css/mystyle.css" + + # Custom JS. Put here your custom JS files. They are loaded after the theme JS; + # they have to be referred from static root. Example + # [[params.customJS]] + # src = "js/myscript.js" + + # Display `Next` on left side of the pagination, and `Prev` on right side one. + # If you set this value to `true`, these positions swap. + # swapPaginator = true + + # Sharing options + # Comment and uncomment to enable or disable sharing options + # If you wanna add a sharing option, read user documentation : + # Tranquilpeak configuration > Theme configuration > sharing-options + # [[params.sharingOptions]] + # name = "Facebook" + # icon = "fa-facebook-official" + # url = "https://www.facebook.com/sharer/sharer.php?u=%s" + + # [[params.sharingOptions]] + # name = "Twitter" + # icon = "fa-twitter" + # url = "https://twitter.com/intent/tweet?text=%s" + + # [[params.sharingOptions]] + # name = "Google+" + # icon = "fa-google-plus" + # url = "https://plus.google.com/share?url=%s" + + # [params.header.rightLink] + # class = "" + # icon = "" + # url = "/#about" + + # Customize link of author avatar in sidebar + # [params.sidebar.profile] + # url = "/#about" + + # Customize copyright value "© 2017 . All Rights Reserved" + # [params.footer] + # copyright = "kakawait" diff --git a/content/post/humble-beginnings.md b/content/post/humble-beginnings.md new file mode 100644 index 0000000..c18edcd --- /dev/null +++ b/content/post/humble-beginnings.md @@ -0,0 +1,70 @@ +--- +title: "Humble Beginnings" +date: 2017-12-21T01:42:57-05:00 +categories: ["Blog"] +tags: ["code"] +draft: true +thumbnailImagePosition: left +thumbnailImage: "https://s3-us-west-2.amazonaws.com/basdb-static-content/site-static/img/main.png" +--- +After much deliberation I've finally decided to go with the [**Tranquilpeak**](https://github.com/kakawait/hugo-tranquilpeak-theme) theme. However, before this I ran into a slew of issues with the badly ported [**Tracks**](https://github.com/ageekymonk/hugo-tracks-theme) theme from WordPress + + +If you want a general overview, feel free to check out the relevant [commit](https://github.com/bdebyl/hugo-tracks-theme/commit/86ca4963c4d0a67ddb1560197c91617e7d3e3754) on my GitHub fork. + + + +# Rough Start +The first thing I noticed was that the navigation bar seemed a bit off. + + +{{< image classes="center" src="https://s3-us-west-2.amazonaws.com/basdb-static-content/site-static/img/header-problem.png" title="Navbar Issue" >}} + +The links show as numbers and attempt to link to `/0`, `/1`, and `/2` which lead to 404s. This didn't seem like the intended functionality. It turned out to be a problem with the usage of the following variable: `.Site.Sections` + +As I'm still learning the ins and outs of Hugo, I'm not familiar with what a section *should* be, but I did know the `sidebar.html` layout file didn't seem to do anything nor exist anywhere on the site (even on mobile screen sizes). I did attempt to find out how sections work by experiment with directories along with `index.md` / `_index.md` files within the `content/` folder. Though, I was unsuccessful in getting the structure I wanted to appear, appear, along with not really understanding why `0` and `0` pages even existed. + +# The Fix +The issue lied in the following chunk of code for `layouts/partials/headers.html`: +```html +
+
+ Home / + {{ range $name, $taxonomy := .Site.Sections }} + {{ if ne $name "post" }} + {{ $name }} / + {{ end }} + {{ end }} +
+``` + +For some reason it seemed that `.Site.Sections` would populate as `0` and `1`. Now, this may be an error of my part from lack of understanding of how Hugo works, but I have yet to make sense of the documentation as far as sections go. + + +In any case, I borrowed the code found in `layouts/partials/sidebar.html` to include the nav links I desired: +```html +
+
+ {{ $url := .Site.BaseURL }} + {{ range .Site.Params.navlinks }} + {{ .name }} / + {{ end }} +
+``` + +---- + +# But Wait, There's More! +After getting more comfortable with how themes are designed for Hugo, I found a slew of other problems with the ported **Tracks** theme: + +* Improper HTML for `/about/` and `/contact/` resulting in a sloppy looking, inconsistent site. +* Redundant `portfolio.html`: duplicated HTML code already used in `category.html` +* Completely unused: + * `layouts/_default/taxonomy.html` + * `layouts/_default/list.html` + * `
` in `layouts/partials/category.html` +* Missing: + * Pagination + * Syntax Highlighting + +At the this point in time I decided it was no longer worth my time in trying to re-work something I wasn't very familiar with, as my main objective was simply to get a portfolio website with blog functionality up and running. diff --git a/themes/tranquilpeak b/themes/tranquilpeak deleted file mode 160000 index 026df93..0000000 --- a/themes/tranquilpeak +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 026df931e5bb33838960823d1f3a4ba72a47923a From e69a80d1b0fc4ca1e8a1c56c0b797a0b337d7407 Mon Sep 17 00:00:00 2001 From: Bastian de Byl Date: Tue, 26 Dec 2017 14:54:01 +0100 Subject: [PATCH 3/3] Excluded public and static directories. --- .gitignore | 2 ++ config.toml | 5 +++-- content/post/humble-beginnings.md | 7 +++---- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index f3c4260..a699e84 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ themes/* test.md +public/* +static/* diff --git a/config.toml b/config.toml index 3c55030..a735a8f 100644 --- a/config.toml +++ b/config.toml @@ -1,5 +1,5 @@ # Tranquilpeak -baseURL = "https://basdb.net/" +baseURL = "http://bdebylnet-cdn.s3-website-us-east-1.amazonaws.com" languageCode = "en-us" defaultContentLanguage = "en-us" title = "basdb" @@ -23,6 +23,7 @@ canonifyurls = true job = "Software Engineer" location = "New England" # Your profile picture + gravatarEmail = "bastiandebyl@gmail.com" # picture = "https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png" # Menu Configuration @@ -121,7 +122,7 @@ canonifyurls = true # Current image is on AWS S3 and delivered by AWS CloudFront. # Otherwise put your image in folder `static/_images/` (development) or in `source/assets/images/` if you can't or don't want to build the theme, # and use relative url : `your-image.png` - coverImage = "cover.jpg" + coverImage = "https://s3.us-west-2.amazonaws.com/basdb-static-content/site-static/img/cover.png" # Display an image gallery at the end of a post which have photos variables (false: disabled, true: enabled) imageGallery = true diff --git a/content/post/humble-beginnings.md b/content/post/humble-beginnings.md index c18edcd..3aab691 100644 --- a/content/post/humble-beginnings.md +++ b/content/post/humble-beginnings.md @@ -3,9 +3,8 @@ title: "Humble Beginnings" date: 2017-12-21T01:42:57-05:00 categories: ["Blog"] tags: ["code"] -draft: true -thumbnailImagePosition: left -thumbnailImage: "https://s3-us-west-2.amazonaws.com/basdb-static-content/site-static/img/main.png" +thumbnailImagePosition: top +thumbnailImage: "/img/humble-beginnings/main.png" --- After much deliberation I've finally decided to go with the [**Tranquilpeak**](https://github.com/kakawait/hugo-tranquilpeak-theme) theme. However, before this I ran into a slew of issues with the badly ported [**Tracks**](https://github.com/ageekymonk/hugo-tracks-theme) theme from WordPress @@ -18,7 +17,7 @@ If you want a general overview, feel free to check out the relevant [commit](htt The first thing I noticed was that the navigation bar seemed a bit off. -{{< image classes="center" src="https://s3-us-west-2.amazonaws.com/basdb-static-content/site-static/img/header-problem.png" title="Navbar Issue" >}} +{{< image classes="center" src="/img/humble-beginnings/header-problem.png" title="Navbar Issue" >}} The links show as numbers and attempt to link to `/0`, `/1`, and `/2` which lead to 404s. This didn't seem like the intended functionality. It turned out to be a problem with the usage of the following variable: `.Site.Sections`