Tulip

Single page starter for Gridsome

No blog, tags or other cruft;
just a single page for your content.

Tailwind CSS w/ minimal base styles
Single page for your content, nothing else.
Ready if you need them: Google Analytics and Open Graph meta tags

Installation And Configuration

Installing and configuring Tulip is very easy. You'll get your site up and running in less than 5 minutes. There's nothing special about Tulip, it's just a Gridsome site, which is again is nothing more than some clever bits around Vue.

This short document is not intended to familiarize you with either of these tools, you should read Gridsome documentation and Vue documentation for more detailed information about respective projects.

1. Install Tulip

Use gridsome create command to install Tulip:

gridsome create my-website https://github.com/Uninen/gridsome-starter-tulip.git

2. Add your content and configure meta data

There's only one layout and one page configured, put all your content into src/pages/Index.vue
You should also fill out or delete whatever meta data you like in src/main.js
Open up ./gridsome.config.js and fill in siteName. You'll find other configurations (like title template and favicon) here as well.
If you want to use Google Analytics, add your own ID in ./gridsome.config.js. If no ID is set, the plugin is not loaded at all. (You should, however, manually remove the associated entry in package.json if you're not using it.)

3. Tweak or replace default styles

As Tailwind Preflight styles are not meant to be used as is, Tulip comes with some very basic base styles (the ones you see on this page) that you can use or replace. These base styles live in src/assets/css/base.postcss and are imported in src/main.js.

If you have existing styles you want to use, you can just copy them into assets/css/ and import them (either in main.js or in Index.vue), or just add them in the style-section of the Index.vue page.

(Note: if your existing styles aren't based on Tailwind, you'll probably want to remove the Tailwind plugin also as the Preflight normalizations are automatically imported and might affect your old styles.)

That's it, you're done! 🎉

Developing

Run gridsome develop to start the local development server
If you want to file a bug report or fork the repo, you'll find the code on GitHub
Finally, Gridsome docs and Vue docs will guide you forward

You can host your built Gridsome site just about anywhere (it's just a static site). Netlify is one of the easiest and free ways for automatically deploy with every push. You can test it via this link and have your own deployment running in about a minute!

Never Asked Questions

But Why?: Because at the time of writing this all Gridsome starters had way too much going on and I wanted a super clean and fast way to get started with Gridsome. The goal was to have a starter template that would involve as few modifications and deletions to get something simple yet production quality stuff published.
What if I want multiple page styles, a blog, authors, tags etc?: If you are just starting, then Tulip is not for you. Try some other awesome Gridsome starter. (But if you're building your site bit by bit, tweaking Tulip is as easy as any other Gridsome site – it's basically just Vue!)