{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/2021-03-23-migrating-portfolio-and-blog-to-gatsby-pt1/","result":{"data":{"markdownRemark":{"html":"

Hi there! I have been ausent for a while now.

\n

I would like to document here about migrating my portfolio and blog from vanilla JavaScript and Jekyll to GatsbyJS.

\n\n

At the beginning of 2020, when the Covid-19's pandemic started unfolding, we had our beautiful daughter.\nAs many people, our family (wife, boy and girl) spent a lot of time together.\nOur kid with remote schooling, and the adults taking kare of our baby while working also remotelly.

\n

Today I decided to rebuild my site almost from scratch.

\n

Its present iteration was built in vanilla JavaScript (the portfolio bit), while the blog was built with Jekyll, using the Minima theme (which is awesome).

\n

Since I like React quite a bit, and I have created a simple project with GatsbyJS recently, decided to rebuild my personal site using it.

\n

This is not a mamooth migration in any way, but I thought it would be nice to write about the process and some differences I might find.

\n

So, to the little differences I found today:

\n

Excerpt separator

\n

In Jekyll, you could declare an excerpt separator directly in your post's header.

\n

As far as I know, you can't do this in GatsbyJS.\nInstead, you have to declare the excerpt separator in your gatsby-confgig.js, like so:

\n
{\n  resolve: `gatsby-transformer-remark`,\n  options: {\n    excerpt_separator: `<!-- more -->`,\n  }\n}
\n

You can the use this excerpt separator like you would with Jekyll:

\n
This is a sample excerpt.\n\n<!-- more -->\n\nAnd here is the rest of the arcticle.
\n

Syntax highlighting

\n

While Jekyll has built in support for syntax highlighting, GatsbyJS does not.

\n

I decided to go with gatsby-remark-prismjs, which is neat:

\n
npm install gatsby-transformer-remark gatsby-remark-prismjs prismjs
\n

Next, in your gatsby-config.js:

\n
plugins: [\n  {\n    resolve: `gatsby-transformer-remark`,\n    options: {\n      plugins: [\n        {\n          resolve: `gatsby-remark-prismjs`,\n          options: {\n            // These are only some default options values, there are tons of options:\n            classPrefix: \"language-\",\n            inlineCodeMarker: null,\n          }\n        }\n      ]\n    }\n  }\n]
\n

I reccomend checking out it's documentation, which is great.

\n

It is required that you pick a PrismJS theme, or create your own. You can preview these themes here.

\n

I'm just repeating the documentation now, but to load a theme, just require its CSS file in your gatsby-browser.js, like so:

\n
require(\"prismjs/themes/prism-okaidia.css\")
\n

That is the one I'm using here.

\n

Finally, to use this super awesome highlighting in your markdown, do the following:

\n
ā€ƒ```javascript\n  // In your gatsby-config.js\n  plugins: [\n    {\n      resolve: `gatsby-transformer-remark`,\n      options: {\n        plugins: [\n          `gatsby-remark-prismjs`,\n        ]\n      }\n    }\n  ]\nā€ƒ```
\n

This is all for today, now I should continue the migration.

\n

This will continue in Part 2, cheers!

","frontmatter":{"title":"Migrating portfolio and blog to GatsbyJS - Part 1","date":"March 23rd, 2021","icon":"ā˜•ļø"},"fields":{"readingTime":{"text":"3 min read"}}}},"pageContext":{"slug":"/2021-03-23-migrating-portfolio-and-blog-to-gatsby-pt1/"}},"staticQueryHashes":["143701507","588331372"]}