Markdown Driven Portfolio website with Nuxt.js
Designer focuses only their works
In April, published the website for my wife, Namika "Haiji" Hamasaki’s portfolio/profile as a designer.
That’s working by Nuxt.js with my idea to use Front Matter Markdown for each content. The website is published on netlify.com which serves static contents by nuxt generate command.
Initially, I started the project to learn around Vue, TypeScript, and Nuxt.js for current projects in my primary jobs at Indiegogo. So just played around technologies in my mind. However, the project got to be more serious by working on with Namika day by day. I really focused to provide simpleness to her, so I’d like to leave this article about something I thought/did before her announcements on public space (Thanks for waiting my late writings, Namika 💖).
Static Website Generation
is one of my favorite areas as a Web Developer since I found Jekyll and GitHub Pages in 2012. By pre-generation, we don’t need to care about runtime. Also, static hosting is wholly cheaper (Mostly it’s free for individual-ish use) than any CGI hosting or cloud. It’s same to the root of my first experience for websites like just creating HTML file and upload to the server in about 20 years ago 👴🏻.
Moreover, nowadays, SPA or JAM stack had expanded my enjoyment. Files are still static but we could whatever dynamically ✨.
So I’m building a lot of JAM stack static website since long ago. Actually, previous her website was also JAM (Jade, Less.js, Umbrella.js, and Harp on GH Pages), my website is too (Elm and SCSS on GH Pages).
Markdown files for contents
As I wrote in the title, the portfolio was driven by “Markdown” files a lot. It’s fine with only that the owner of the portfolio writes Markdown (and it’s little flavored 😉) to add page about her work.
Front Matter Markdown (It may be readable if see with “raw”)
Generated Page
- Attributes of her work (title, published year, description, product owner and her role for the work)
- Colors for painting the logo
- Names of related works
- Markdown body
And the filename stimpacks.md determines the path /work/stimpacks and the key to show images.
Yeah, that’s the exact way what Jekyll did with Front Matterer Markdown.
One thing otherwise of Markdown
In addition, I gave her a magical tag which is named <work-media>.
That is the particular element to run a Vue component. By giving some props.
<work-media name=”filename” />
-> name="single.jpg" -> Show single image
-> name="a.jpg,b.jpg" -> Show carousel for multiple images
-> name="video.mp4" -> Show video player
-> name="YouTube's URL" -> Show embed Youtube PlayerAs a component structure, I might have to provide single components for every single purpose rather than rough abstraction and coupling such as that. However, for the experience as a writer of Markdown, I guessed she doesn’t want to learn about multi-elements and their properties. Yes, she should focus on more essential part of the contents.
To run Vue component on Markdown and to use Front Matter format efficiently, I built frontmatter-markdown-loader secondarily. By this loader, we can import Frontmatter Markdown as compiled HTML+JSON-ed Front Matter attributes. Also by vue option, can get compiled Vue component which can inject other Vue components (See also this article).
Netlify: New era of static site hosting
Netlify is my most favorite service among I met in last year entirely. They provide static site hosting with excellent features.
Especially, support of HTTPS for custom domains was a big reason I chose Netlify over GitHub Pages (GH has started support recently though).
Also, they can run build commands. For GH, I used to have an additional step with Circle CI to deploy the latest changes. For Nuxt.js, just running nuxt generate on Netlify, then distribute ./dist directory.
Their Form feature is also useful. We could have backend-ish behavior like form submission with light configurations. I didn’t want to have/manage backend server for only a mail form nor using another service, so built-in feature makes me happy indeed. I couldn’t believe they even run reCaptcha for forms.
To run reCapthca with Ajax, I did some undocumented work-around, so may leave as another article later.
Build for each language
The website is supporting both English and Japanese. For contents like markdowns, separated directory. To show localized messages, chose vue-i18n.
So, by single hosting, could serve for every lang. However, didn’t want to have lang specific path, parameters nor logic to detect locale. Also for SEO and her professional name for each language, decided to host each lang separately with big thanks to Netlify.
To build separately, prepared a logic to decide default locale with an environment variable. yarn run build:en kicks BUILD_LOCALE=en nuxt generate.
Btw, the language switcher is the cutest component by Vue and SVG among what I created ever✨.
Closing Remarks
Sources
The repository is public. Every commit can be seen from the beginning.
VuePress
In mid of this project, the creator of Vue, Evan has published VuePress. That follows roughly my use-case. So, I might use what if I started the project 6 months later (I like this “Why not…?” section in the repo of VuePress) and I’m not interested in Nuxt.js.
Future
I still have many undone ToDos :) so, am going to have more improvement both as code and website 😉
