Introduction to Findborg Image Search
November 21, 2020
Findborg Image Search is a breath of fresh air when it comes to finding images on the internent. It use modern technologies and is very simple to use. Findborg Image Search makes it easy and fun for users to find images fast, and find beautiful websites without needing to become a search engine expert. Best of all, there are no ads!
Why Gridsome?
- Local development with hot-reloading - See code changes in real-time.
- Data source plugins - Use it for any popular Headless CMSs, APIs or Markdown-files.
- File-based page routing - Quickly create and manage routes with files.
- Centralized data managment - Pull data into a local, unified GraphQL data layer.
- Vue.js for frontend - A lightweight and approachable front-end framework.
- Auto-optimized code - Get code-splitting and asset optimization out-of-the-box.
- Static files generation - Deploy securely to any CDN or static web host.
Learn more about how Gridsome works
<template>
<Layout>
<div class="container-inner mx-auto my-16">
<h1 class="text-4xl font-bold leading-tight">{{ $page.post.title }}</h1>
<div class="text-xl text-gray-600 mb-8">{{ $page.post.date }}</div>
<div class="markdown-body" v-html="$page.post.content" />
</div>
</Layout>
</template>
Prerequisites
You should have basic knowledge about HTML, CSS, Vue.js and how to use the Terminal. Knowing how Vue Single File components & GraphQL works is a plus, but not required. Gridsome is a great way to learn both.
Gridsome requires Node.js and recommends Yarn. How to setup
1. Install Gridsome CLI tool
Using yarn:
yarn global add @gridsome/cli
Using npm:
npm install --global @gridsome/cli
2. Create a Gridsome project
gridsome create my-gridsome-site
to create a new projectcd my-gridsome-site
to open foldergridsome develop
to start local dev server athttp://localhost:8080
- Happy coding 🎉🙌
3. Next steps
- Create
.vue
components in the/pages
directory to create page routes. - Use
gridsome build
to generate static files in a/dist
folder