New Portfolio = Experimentation!

March 23, 2019

As title says new portfolio is an opportunity for experimentation, that means new technologies, frameworks and libraries. So here are some things I use to built my portfolio:

  • GatsbyJS - React static website generator & more
  • Bulma - CSS Framework with Flexbox
  • DeployHQ - Deploy Git Repos to Website servers

GatsbyJS - the power of create-react-project & static pages with SEO

So a big problem with making non web apps like portfolios, blogs, marketing websites and wikis in React or as a Single Page Application(SPA) is that the site SEO suffers. This is because all your routes in a React project are just rendering on the same HTML page using JavaScript and these routes share one <head> with one set of <meta> tags. Browsers are getting better at indexing JavaScript SPAs but for now we have solutions like GatsbyJS.

GatsbyJS is a React static site generator, it lets you enjoy the benefits of React whilst giving each of you routes it’s own SEO. What Gatsby does is it converts any JS file stored in the pages/ folder of the project into it’s own HTML page, this can also be done for blog posts. To do this Gatsby has a component called <SEO /> props can be given to this component like title, description and keywords which can then turn into <meta> tags.

Enter plugins & starters

I didn’t need to make my portfolio using react I could have just use HTML, SASS and JS but then I would have had to write Webpack or Gulp file to; minify, add vendor prefixes, image optimisation, create web manifest and add hot-reloading. Creating you own bundler file can be a waste time if your project is only something small like a portfolio, even a lot of react apps use create-react-app which gives React Developer the Webpack basics.

A basic GatsbyJS project gives you all the above and more. Gatsby has a community of developers that create plugins and starters which are easy to add to add project. For my own portfolio I use a starter called gatsby-blog-starter, which convert markdown files into blog posts which was is what you are seeing right now.

Bulma - A Step to Far?

Sometimes experimenting actually creates problems, Bulma was one of those. Why was Bulma a problem, because I didn’t need half of the stuff.

Bulma is a CSS Framework which use Flexbox for columns and layout, and provides customisation in the form of SASS variables, it all sounds great so far it’s would be great for a Web app with multiple interactions fields, but not a portfolio which only has 3 page styles. Whilst I found the columns and some of the components very useful, a lot of the other Bulma styling were restricting.

Bulma doesn’t have a secondary color variable only primary and state colors, and wants you use use shades of grey for most text. For a portfolio which someone like myself wants to create something that is almost like a art piece of my work there are going to be some design rules broken in the name of art and style.

However I have learnt from my mistake and still think Bulma would work well with a big Website or Web app.

DeployHq - Deploying websites at the push of a button!

Okay, DeployHQ isn’t a new technology for me I actually use it working at Sensum and I love it! DeployHQ lets you deploy to any server using your Repos from Github, BitBucket etc and use Build commands in the process such as npm install and npm run build.

Before this any new updates for my portfolio were done by FTP and dragging my folders and files across. Most modern websites also have build commands which if you have to run them mannually and click yes to every file overwrite when dragging the folder across all it would take is one missed word in a paragraph to make you have to start the whole process again :’(. With DeployHQ the hard part is setting up the server connection and adding the build commands to run, after this if you miss one word again you can very quickly add it and press the deploy button again!

Conclusion

I hope you all enjoy my new portfolio, and that I maybe have many more projects and blog updates to come!