[{"data":1,"prerenderedAt":691},["ShallowReactive",2],{"post-building-portfolio-gridsome":3},{"id":4,"title":5,"body":6,"date":677,"description":12,"extension":678,"image":279,"meta":679,"navigation":680,"path":681,"seo":682,"slug":683,"stem":684,"summary":685,"tags":686,"__hash__":690},"posts\u002Fposts\u002Fbuilding-portfolio-gridsome.md","Building Portfolio Site Using Gridsome",{"type":7,"value":8,"toc":659},"minimark",[9,13,16,19,22,25,28,31,36,39,42,48,51,54,64,68,77,103,107,110,138,143,146,198,203,220,223,249,253,270,280,283,292,298,301,307,310,319,330,343,350,356,359,384,389,395,398,408,411,429,440,446,452,458,464,470,473,486,492,495,517,523,526,540,546,562,584,587,596,602,609,612,618,621,627,630,636,643,649,653,656],[10,11,12],"p",{},"My last portfolio site was designed in 2017 using plain HTML and CSS, I made it quickly just to make sure I have a portfolio site as a freelancer, straight out of college. Since then I was learning more front end technologies such as ReactJS on my full-time work experience, and VueJS for my side projects.",[10,14,15],{},"I was learning React out of neccessity—because work requirements, industry standards, while learning Vue accidentally. Turns out developing websites and web apps with Vue was much more fun and easier. For comparison, I learned React basics for 6 months, while learning Vue only costs me 2 weeks or so (I guess the experience learning React helps). It was that much easier, and by no means any lesser in features.",[10,17,18],{},"So in the end of 2019 I'm getting out of my full-time job and back with my side projects and business. I needed a new personal website. I knew I wanted to use Vue for front-end, but what about the back-end? The only server tech I'm familiar with and suits the job would be Laravel.",[10,20,21],{},"So I began looking for how to built CMS in Laravel. I found twill.io which is used by Pentagram, but I didn't think I need that much capability and complexity. I need something simple and fast. It also means I need to maintain a Laravel server and its database.",[10,23,24],{},"I knew about this static website builder called NextJS—built on React, and NuxtJS—its Vue equivalent. There's also this newer thing called Gatsby (React), and again its Vue equivalent: Gridsome.",[10,26,27],{},"I also looked into Hugo (golang), but I don't bother to learn whole new thing for this, and I wanted something quick and familiar. I also consider using Webflow, but as a developer I want the whole code flexibility for my portfolio site.",[10,29,30],{},"Making static site using Gridsome also means lower hosting cost for me as I don't need full server access capabilities. I can use shared hosting with cPanel and Filezilla access, which only cost me IDR 15000 (USD 1~) per month.",[32,33,35],"h2",{"id":34},"why-and-what-is-gridsome","Why and What is Gridsome?",[10,37,38],{},"First, it's quick, easy and creates blazing fast static and dynamic website, no database needed with markdown abilities. It takes what I already knew about Vue and making it powerful with data.",[10,40,41],{},"This is the definition of Gridsome:",[43,44,45],"blockquote",{},[10,46,47],{},"Gridsome is a Vue-powered static site generator for building CDN-ready websites for any headless CMS, local files or APIs",[10,49,50],{},"Compared to Nuxt, Gridsome is simpler in a way. Nuxt has more option how to render site: Server Site Rendering, Static Site Generation, and Single Page Application. While Gridsome belongs to Static Site Generation, in a category called JAMstack—JavaScript, APIs, and Markup. Nuxt is more suitable for large scale web application, while Gridsome is for something quick like a personal website.",[10,52,53],{},"It's still in early state of development (version 0.7.19 as of writing) but already has all the features you need for a portfolio site. What sold me on Gridsome is the GraphQL, markdown, array of plugins for connecting many data sources, available templates, and the obvious Vue power!",[10,55,56,57],{},"Read more on ",[58,59,63],"a",{"href":60,"rel":61},"https:\u002F\u002Fgridsome.org\u002Fdocs\u002F#why-gridsome",[62],"nofollow","Why Gridsome?",[32,65,67],{"id":66},"ready-made-templates","Ready Made Templates",[10,69,70,71,76],{},"The rest of this article will be a long tutorial with codes. If you just want to get quickly up and running, don't want to make everything from scratch, you can check ",[58,72,75],{"href":73,"rel":74},"https:\u002F\u002Fgridsome.org\u002Fstarters\u002F",[62],"Gridsome starters"," and get an almost instant site!",[10,78,79,80,85,86,85,91,96,97,102],{},"Few templates worth checking: ",[58,81,84],{"href":82,"rel":83},"https:\u002F\u002Fgridsome.org\u002Fstarters\u002Fgridsome-blog-starter\u002F",[62],"Gridsome Blog Starter",", ",[58,87,90],{"href":88,"rel":89},"https:\u002F\u002Fgridsome.org\u002Fstarters\u002Fforestry-starter\u002F",[62],"Forestry Starter",[58,92,95],{"href":93,"rel":94},"https:\u002F\u002Fgridsome.org\u002Fstarters\u002Fgridsome-minimal-markdown-starter\u002F",[62],"Gridsome Minimal Markdown Starter",", and ",[58,98,101],{"href":99,"rel":100},"https:\u002F\u002Fgithub.com\u002Fitsnwa\u002Fdarkfolio",[62],"Darkfolio",".",[32,104,106],{"id":105},"building-the-portfolio-site","Building the Portfolio Site",[10,108,109],{},"I'll show you the important building parts so you can build a portfolio site using Gridsome from scratch. These are the important building blocks I wished I've known when learning Gridsome:",[111,112,113,117,120,123,126,129,132,135],"ol",{},[114,115,116],"li",{},"Creating Content",[114,118,119],{},"Connecting Content Source",[114,121,122],{},"Creating Pages",[114,124,125],{},"Linking",[114,127,128],{},"Making Page Layouts",[114,130,131],{},"Listing Content in a Page",[114,133,134],{},"Viewing Single Content",[114,136,137],{},"Working with Tags",[139,140,142],"h3",{"id":141},"gridsome-installation","Gridsome Installation",[10,144,145],{},"Here's the quick start guide:",[111,147,148,155,161,167,176,187],{},[114,149,150,154],{},[151,152,153],"code",{},"npm install --global @gridsome\u002Fcli"," to install Gridsome CLI tool",[114,156,157,160],{},[151,158,159],{},"gridsome create my-portfolio-site"," to create a new project",[114,162,163,166],{},[151,164,165],{},"cd my-portfolio-site"," to open the folder",[114,168,169,172,173],{},[151,170,171],{},"gridsome develop"," to start a local dev server at ",[151,174,175],{},"http:\u002F\u002Flocalhost:8080",[114,177,178,179,182,183,186],{},"Create ",[151,180,181],{},".vue"," components in the ",[151,184,185],{},".\u002Fsrc\u002Fpages"," directory to create pages",[114,188,189,190,193,194,197],{},"Use ",[151,191,192],{},"gridsome build"," to generate static files in a ",[151,195,196],{},".\u002Fdist"," folder",[199,200,202],"h4",{"id":201},"learn-more","Learn more...",[204,205,206,213],"ul",{},[114,207,208],{},[58,209,212],{"href":210,"rel":211},"https:\u002F\u002Fgridsome.org\u002Fdocs\u002Fhow-it-works\u002F",[62],"How Gridsome works",[114,214,215],{},[58,216,219],{"href":217,"rel":218},"https:\u002F\u002Fgridsome.org\u002Fdocs\u002Fdeployment\u002F",[62],"How to deploy Gridsome",[10,221,222],{},"After initiating Gridsome project, I also install these dependencies:",[111,224,225,231,237,243],{},[114,226,227,230],{},[151,228,229],{},"@gridsome\u002Fvue-remark"," : The power of Vue component inside Markdown file.",[114,232,233,236],{},[151,234,235],{},"gridsome-plugin-tailwindcss"," : Utility-first CSS, use ready made CSS classes instead of inventing your own names",[114,238,239,242],{},[151,240,241],{},"@tailwindcss\u002Ftypography"," : Instant great looking typography for blog post (with customization capability)",[114,244,245,248],{},[151,246,247],{},"gsap"," : Animation power! (Optional, I'll use it on later tutorial)",[199,250,252],{"id":251},"directory-structure","Directory Structure",[10,254,255,256,258,259,262,263,266,267,102],{},"Each ",[151,257,181],{}," file and folder inside ",[151,260,261],{},"\u002Fpages"," will get their own route. For each new content, you have to create their own markdown ",[151,264,265],{},".md"," file under designated folder, in this case ",[151,268,269],{},"\u002Fcontent",[271,272,277],"pre",{"className":273,"code":275,"language":276},[274],"language-text","📦project-name\n ├─📂content \u002F\u002F markdown content files\n │ └─📂posts\n │ │ └─📜building-portfolio-gridsome.md\n │ └─📂projects\n │ │ └─📜first-project.md\n ├─📂src\n │ └─📂assets \u002F\u002F css files, images\n │ └─📂components \u002F\u002F Vue components\n │ └─📂layouts \u002F\u002F page layout\n │ └─📂pages \u002F\u002F top level pages\n │ │ └─📜Index.vue \u002F\u002F home page\n │ │ └─📜About.vue\n │ │ └─📜Blog.vue\n │ └─📂templates \u002F\u002F single content page template\n │ │ └─📜Post.vue\n │ │ └─📜Project.vue\n │ └─📜App.vue\n │ └─📜main.js\n ├─📜tailwind.config.js\n ├─📜gridsome.config.js\n ├─📜gridsome.server.js\n ├─📜package.json\n ├─ ...\n","text",[151,278,275],{"__ignoreMap":279},"",[139,281,116],{"id":282},"creating-content",[10,284,285,286,288,289,102],{},"First, we'll be making the markdown content we needed under ",[151,287,269],{}," folder. For blog posts, each post will be a markdown file like this: ",[151,290,291],{},"\u002Fcontent\u002Fposts\u002Fblog-post-title.md",[10,293,294,295,102],{},"Each markdown file consist of 2 parts: front-matter and the content itself. These part marked by three em-dashes (---). Front-matter consist of attributes that can be collected and represented as data using GraphQL. For a blog post, the front-matter will be: ",[151,296,297],{},"title, summary, image, slug, year, month, date, tags",[10,299,300],{},"For this post, this is the markdown file:",[271,302,305],{"className":303,"code":304,"language":276},[274],"title: \"Building Portfolio Site Using Gridsome\"\nsummary: \"...\"\nimage: \"...\"\nslug: \"building-portfolio-gridsome\"\nyear: \"2020\"\nmonth: \"7\"\ndate: \"17\"\ntags: ['development', 'gridsome', 'tutorial']\n---\n\nMy last portfolio site was ...\n(markdown content continues)\n",[151,306,304],{"__ignoreMap":279},[139,308,119],{"id":309},"connecting-content-source",[10,311,312,313,316,317,102],{},"Here in Gridsome Config we can add all the plugins we installed earlier. This includes the ",[151,314,315],{},"vue-remark"," and ",[151,318,235],{},[10,320,321,322,325,326,329],{},"For each markdown content type (say we have Post and Project), we need to register them here. ",[151,323,324],{},"baseDir"," indicates where to read the markdown files from. ",[151,327,328],{},"pathPrefix"," will be added to the website URL (domain.com\u002Fprefix\u002Fcontent-post-here).",[10,331,332,333,336,337,340,341,102],{},"After making changes on Gridsome Config always restart your dev server for it to apply the changes. You can kill the process (",[151,334,335],{},"Ctrl+C"," or ",[151,338,339],{},"cmd+C",") then restart ",[151,342,171],{},[10,344,345,346,349],{},"Go ahead and open ",[151,347,348],{},"gridsome.config.js"," and put this code:",[271,351,354],{"className":352,"code":353,"language":276},[274],"module.exports = {\n  siteName: 'Portfolio Site',\n  plugins: [\n    {\n      use: '@gridsome\u002Fvue-remark',\n      options: {\n        typeName: 'Post',\n        baseDir: '.\u002Fcontent\u002Fposts',\n        pathPrefix: '\u002Fblog',\n        template: '.\u002Fsrc\u002Ftemplates\u002FPost.vue'\n      }\n    },\n    {\n      use: '@gridsome\u002Fvue-remark',\n      options: {\n        typeName: 'Project',\n        baseDir: '.\u002Fcontent\u002Fprojects',\n        pathPrefix: '\u002Fproject',\n        template: '.\u002Fsrc\u002Ftemplates\u002FProject.vue'\n      }\n    },\n    {\n      use: 'gridsome-plugin-tailwindcss',\n    },\n  ]\n}\n\n",[151,355,353],{"__ignoreMap":279},[139,357,122],{"id":358},"creating-pages",[10,360,361,362,364,365,368,369,372,373,376,377,380,381,102],{},"For each pages created inside ",[151,363,261],{},", Gridsome will detect them and make the routes. So if you create ",[151,366,367],{},"AboutMe.vue",", you can access them on URL ",[151,370,371],{},"domain.com\u002Fabout-me",". ",[151,374,375],{},"Index.vue"," will be homepage, or default for that folder. If you create a file under folder: ",[151,378,379],{},"pages\u002Flettering\u002FIndex.vue",", it can be accessed from ",[151,382,383],{},"domain.com\u002Flettering",[10,385,386,387],{},"Here's my ",[151,388,375],{},[271,390,393],{"className":391,"code":392,"language":276},[274],"\u003Ctemplate>\n  \u003CLayout>\n    \u003Cdiv class=\"flex flex-col lg:flex-row\">\n      \u003Cdiv class=\"mt-16 text-xl lg:w-1\u002F2 sm:text-2xl md:text-3xl lg:text-4xl\">\n        \u003Cp class=\"max-w-md lg:max-w-3xl lg:pr-16 lg:mt-8\">Hello! I'm Laurensius, a lettering artist, type designer & web developer.\u003C\u002Fp>\n        \u003Cp class=\"max-w-md mt-4 lg:max-w-3xl lg:pr-16\">I’m open to projects and collaboration, feel free to contact me.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"mt-16 mb-40 text-5xl font-bold uppercase lg:w-1\u002F2 lg:text-6xl xl:text-8xl\">\n        \u003Cdiv class=\"block\">\n          \u003Cg-link class=\"leading-none text-current link\" to=\"\u002Fstudio\">Studio\u003C\u002Fg-link>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"block\">\n          \u003Cg-link class=\"leading-none text-current link\" to=\"\u002Flettering\">Lettering\u003C\u002Fg-link>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"block\">\n          \u003Cg-link class=\"leading-none text-current link\" to=\"\u002Fblog\">Journal\u003C\u002Fg-link>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"block\">\n          \u003Cg-link class=\"leading-none text-current link\" to=\"\u002Fabout\">About\u003C\u002Fg-link>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  metaInfo: {\n    title: 'Home'\n  }\n}\n\u003C\u002Fscript>\n",[151,394,392],{"__ignoreMap":279},[139,396,125],{"id":397},"linking",[10,399,400,401,404,405,407],{},"Notice those ",[151,402,403],{},"\u003Cg-link>"," components on the page code above. It's a component provided by Gridsome. From the docs: ",[151,406,403],{}," uses IntersectionObserver to prefetch linked pages when link is in view. This makes browsing around in a Gridsome site very fast because the clicked page is already downloaded.",[139,409,128],{"id":410},"making-page-layouts",[10,412,413,414,417,418,421,422,425,426,102],{},"Notices the use of ",[151,415,416],{},"\u003CLayout>"," component, it's from ",[151,419,420],{},"\u002Flayouts\u002FDefault.vue",". You can create new layout by making a file inside ",[151,423,424],{},"\u002Flayouts"," then register them on ",[151,427,428],{},"\u002Fmain.js",[10,430,431,432,435,436,439],{},"Here's ",[151,433,434],{},"StudioLayout.vue"," a custom layout I made for ",[151,437,438],{},"\u002Fstudio"," pages.",[271,441,444],{"className":442,"code":443,"language":276},[274],"\u003Ctemplate>\n  \u003Cmain class=\"relative max-w-full min-h-screen mx-5\" role=\"main\">\n    \u003CStudioHeader\u002F>\n    \u003Cslot\u002F>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport StudioHeader from \"@\u002Fcomponents\u002FStudioHeader\";\nexport default {\n  components: {\n    StudioHeader\n  }\n}\n\u003C\u002Fscript>\n",[151,445,443],{"__ignoreMap":279},[10,447,448,449],{},"Then I register them on ",[151,450,451],{},"main.js",[271,453,456],{"className":454,"code":455,"language":276},[274],"import DefaultLayout from '~\u002Flayouts\u002FDefault.vue'\nimport StudioLayout from '~\u002Flayouts\u002FStudioLayout.vue'\nimport \".\u002Fassets\u002Fcss\u002Fmain.css\";\n\nexport default function (Vue, { router, head, isClient }) {\n  Vue.component('Layout', DefaultLayout)\n  Vue.component('StudioLayout', StudioLayout)\n}\n",[151,457,455],{"__ignoreMap":279},[10,459,460,461],{},"Then I can use it on pages I want to be different than the default layout, in this case ",[151,462,463],{},"\u002Fpages\u002Fstudio\u002FRetailFonts.vue",[271,465,468],{"className":466,"code":467,"language":276},[274],"\u003Ctemplate>\n  \u003CStudioLayout>\n    \u003Ch1 class=\"mb-4 text-4xl leading-none uppercase lg:text-6xl\">Retail Fonts\u003C\u002Fh1>\n    ...\n  \u003C\u002FStudioLayout>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  metaInfo: {\n    title: 'Retail Fonts'\n  }\n}\n\u003C\u002Fscript>\n",[151,469,467],{"__ignoreMap":279},[139,471,131],{"id":472},"listing-content-in-a-page",[10,474,475,476,478,479,482,483,102],{},"Now, we can start getting and presenting data from ",[151,477,269],{}," folder. We'll be displaying blog posts using GraphQL to get the data with ",[151,480,481],{},"\u003Cpage-query>"," inside the page ",[151,484,485],{},"\u002Fpages\u002FBlog.vue",[271,487,490],{"className":488,"code":489,"language":276},[274],"\u003Ctemplate>\n  \u003CLayout>\n    \u003Ch1 class=\"mb-4 text-4xl leading-none uppercase lg:text-6xl\">Journal\u003C\u002Fh1>\n    \u003Cdiv class=\"mb-4\" v-for=\"post in $page.posts.edges\"\n      :key=\"post.node.id\">\n      \u003Cspan class=\"block text-sm md:w-24 lg:w-32 md:inline-block sm:text-lg lg:text-2xl text-secondary\">\n        {{ post.node.date }}\n      \u003C\u002Fspan>\n      \u003Cg-link class=\"text-3xl text-current sm:text-5xl lg:text-6xl link\"\n        :to=\"post.node.path\">{{ post.node.title }}\u003C\u002Fg-link>\n    \u003C\u002Fdiv>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n\n\u003Cpage-query>\nquery {\n    posts: allPost {\n    edges {\n      node {\n        id\n        path\n        title\n        summary\n        date (format: \"MMM Y\")\n      }\n    }\n  }\n}\n\u003C\u002Fpage-query>\n",[151,491,489],{"__ignoreMap":279},[10,493,494],{},"Here's what you need to know about the GraphQL query above.",[10,496,497,500,501,504,505,508,509,512,513,516],{},[151,498,499],{},"posts"," is the variable we'll be using in the page itself. ",[151,502,503],{},"allPost"," is like a template function given by Gridsome, if you want to get other type of content change it into content names prefixed with ",[151,506,507],{},"all"," such as ",[151,510,511],{},"allProject",". Inside ",[151,514,515],{},"node"," are attributes from the Frontmatter inside markdown files. Only listed attributes will be available in the pages, so you need to list each one of them.",[10,518,519,520,102],{},"After getting the data, we loop through the posts to show the title with links using ",[151,521,522],{},"v-for=\"post in $page.posts.edges\"",[139,524,134],{"id":525},"viewing-single-content",[10,527,528,529,532,533,536,537,102],{},"Now that the index page is done, we need to view the individual blog post. Let's create ",[151,530,531],{},"Post.vue"," files under ",[151,534,535],{},"\u002Ftemplates"," folder. Gridsome will detect this template belongs to content type ",[151,538,539],{},"Post",[271,541,544],{"className":542,"code":543,"language":276},[274],"\u003Ctemplate>\n  \u003CLayout>\n    \u003Carticle class=\"pt-20 pb-40 mx-auto font-light prose md:prose-md lg:prose-lg font-body\">\n      \u003Ch1 class=\"font-sans font-medium\">{{ $page.post.title }}\u003C\u002Fh1>\n      \u003Csmall class=\"tracking-wider text-secondary\">{{ $page.post.date }}\u003C\u002Fsmall>\n      \u003CVueRemarkContent \u002F>\n    \u003C\u002Farticle>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n\n\u003Cpage-query>\nmetaInfo() {\n  return {\n    title: this.$page.post.title\n  }\n},\nquery Post ($id: ID!) {\n  post(id: $id) {\n    title\n    summary\n    date (format: \"DD MMM Y\")\n  }\n}\n\u003C\u002Fpage-query>\n\n",[151,545,543],{"__ignoreMap":279},[10,547,548,549,551,552,316,555,558,559,102],{},"Like a normal Vue component, each ",[151,550,181],{}," files have access to ",[151,553,554],{},"\u003Cscript>",[151,556,557],{},"\u003Cstyle>",". In this example I'm using a computed to get month data and show them as word instead of numerical. You can access the page data using ",[151,560,561],{},"this.$page",[10,563,564,565,568,569,572,573,576,577,579,580,583],{},"Notice in the ",[151,566,567],{},"page-query"," we're using a variable ID on query ",[151,570,571],{},"Post ($id: ID!)"," to get the page we needed. There's also the ",[151,574,575],{},"\u003CVueRemarkContent \u002F>"," component that will render the markdown content there, and Vue component inside markdown because we're using the ",[151,578,315],{}," plugin. I'm also using tailwind typography plugin here with the CSS class ",[151,581,582],{},"prose"," to get instant beautiful blog typography.",[139,585,137],{"id":586},"working-with-tags",[10,588,589,590,592,593,595],{},"To make the tags working, we need to add the reference in ",[151,591,348],{},". Under plugins, for the ",[151,594,539],{}," you can change it into this.",[271,597,600],{"className":598,"code":599,"language":276},[274],"{\n  use: '@gridsome\u002Fvue-remark',\n  options: {\n    typeName: 'Post',\n    baseDir: '.\u002Fcontent\u002Fposts',\n    pathPrefix: '\u002Fblog',\n    template: '.\u002Fsrc\u002Ftemplates\u002FPost.vue',\n    refs: {\n      tags: {\n        typeName: 'Tag',\n        create: true\n      }\n    }\n  }\n}\n",[151,601,599],{"__ignoreMap":279},[10,603,604,605,102],{},"Now restart Gridsome CLI and the data will be available for you. We can check them in ",[58,606,607],{"href":607,"rel":608},"http:\u002F\u002Flocalhost:8080\u002F___explore",[62],[10,610,611],{},"You can get Post with certain tags using this query:",[271,613,616],{"className":614,"code":615,"language":276},[274],"query {\n  allPost(filter: { tags: { contains: [\"tutorial\"] }}) {\n    edges {\n      node {\n        title\n      }\n    }\n  }\n}\n",[151,617,615],{"__ignoreMap":279},[10,619,620],{},"Or you can list all the tags:",[271,622,625],{"className":623,"code":624,"language":276},[274],"query {\n  allTag {\n    edges {\n      node {\n        id\n      }\n    }\n  }\n}\n",[151,626,624],{"__ignoreMap":279},[10,628,629],{},"Then making a page that displays all post with a certain tag:",[271,631,634],{"className":632,"code":633,"language":276},[274],"query ($id: ID!) {\n  tag(id: $id) {\n    title\n    belongsTo {\n      edges {\n        node {\n          ... on Post {\n            id\n            title\n            path\n          }\n        }\n      }\n    }\n  }\n}\n",[151,635,633],{"__ignoreMap":279},[10,637,638,639,642],{},"Note: on bottom left page on GraphQL explore add this to ",[151,640,641],{},"QUERY VARIABLE"," to try the query above:",[271,644,647],{"className":645,"code":646,"language":276},[274],"{\n  \"id\": \"tutorial\"\n}\n",[151,648,646],{"__ignoreMap":279},[32,650,652],{"id":651},"wrapping-up","Wrapping Up",[10,654,655],{},"By this stage you should be able to creating your own portfolio site. I hope this post is enough to getting you off the ground using Gridsome.",[10,657,658],{},"Thanks for reading.",{"title":279,"searchDepth":660,"depth":660,"links":661},2,[662,663,664,676],{"id":34,"depth":660,"text":35},{"id":66,"depth":660,"text":67},{"id":105,"depth":660,"text":106,"children":665},[666,668,669,670,671,672,673,674,675],{"id":141,"depth":667,"text":142},3,{"id":282,"depth":667,"text":116},{"id":309,"depth":667,"text":119},{"id":358,"depth":667,"text":122},{"id":397,"depth":667,"text":125},{"id":410,"depth":667,"text":128},{"id":472,"depth":667,"text":131},{"id":525,"depth":667,"text":134},{"id":586,"depth":667,"text":137},{"id":651,"depth":660,"text":652},"2020-07-17","md",{},true,"\u002Fposts\u002Fbuilding-portfolio-gridsome",{"title":5,"description":12},"building-portfolio-gridsome","posts\u002Fbuilding-portfolio-gridsome","Get started building portfolio site and blog using Gridsome.",[687,688,689],"development","gridsome","tutorial","TvvwhimlBp0rQW8HmrLoFThhtLTWL46yRDu3e665F_o",1789547444442]