No blog, tags or other cruft;
just a single page for your content.
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.
Use gridsome create
command to install Tulip:
gridsome create my-website https://github.com/Uninen/gridsome-starter-tulip.git
src/pages/Index.vue
src/main.js
./gridsome.config.js
and fill in siteName
. You'll find other configurations (like title template and favicon) here as well../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.)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! 🎉
gridsome develop
to start the local development serverYou 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!
Vue + Gridsome is ❤️
© Ville Säävuori (@uninen) 2020, MIT License