Too busy to start from scratch, but excited to start learning how to use an API-based CMS? Get a blog up and running in minutes. Modify and adapt it to your liking, it's all yours!
For this project, we provide you with all the source code you need to get your blog up and running.
Install the Prismic Command Line Tool
If you don't already have it, make sure to first install npm on your machine.
Fire up a terminal (command prompt or similar on Windows) and run the following command.
npm install -g prismic-cli
Sometimes it's possible that this command doesn't work. If that's the case for you, try executing a sudo command:
sudo npm install -g prismic-cli
The Prismic command is now available globally. We will now use that tool to launch this tutorial project. In the terminal, navigate to the location you want to launch your project and run the following command.
prismic theme --theme-url https://github.com/prismicio/vuejs-blog.git --conf public/index.html
prismic theme command will initialize a Vue.js project that is configured to connect with the repository you just created!
(MAKE SURE YOU'RE USING THE LATEST VERSION OF CLI)
The command will end by displaying a link to your content repository backend in the form of https://your-repo-name.prismic.io.
Write some content
Start by filling in your photo, your name and a headline for your blog's home.
Go to "Content" and hit "New", choose the Blog's home type and fill it with your own content. Save and publish!
Now, write a few blog posts. Make sure to fill the mandatory UID field that is used for your post's URL. Save and publish!
Run the blog
Go back to terminal (command prompt or similar on Windows), point it to your project location (cd your-project-folder) and run!
npm run serve
This will launch a local development server at http://localhost:8080.
Deploy & go live!
An easy way to deploy your Vue.js application is to use Netlify. Just follow these few simple steps :
First create a new Git repository with GitHub, Git Lab or Bitbucket and initialise this new repo:
git remote add <shortname> <url>
Commit and Push your code to the Git repository
git add .
git commit -m "make it better"
git push <shortname> master
Then create a Netlify account and connect your Github.
After you've done this add your build settings:
Branch to deploy: Master
Build command: npm run build
Publish directory: dist
And that's it deploy your website and your live.
Customize to your likings
You should easily find what to modify in the code to customize the blog: just edit the stylesheets and the templates to fit your design!
Just curious about the code?
If you aren't interested in recreating this project and would just like to look at the code then you can download the project here.