Stupid question - how do I convert my OneNote to VuePress?

Dev Zone Code
1

So I have a OneNote that I use for various Linux deployment stuff, for my homelab, and I am trying to learn more about using VuePress.

So far, in my research, I haven’t really found like “an idiot’s guide” to deploying VuePress so that I am able to start creating markdown files so that it can automatically generate/regenerate the VuePress output pages.

My question is - what would people recommend to get VuePress up and running quickly for someone who knows nothing about it?

Do I need to deploy GitLab at home so I will be able to push my content to that, and then have VuePress docker container pull from that, to then generate the pages?

If anybody has any suggestions or ideas on how I can get up and running quickly so that I can focus on converting my OneNote to VuePress markdown pages, that would be greatly appreciated.

(So far, based on what I’ve read so far, I am going to need to stand up a node.js server/service, and a pnpm package manager (because apparently, for npm, I need a subscription, which for my homelab use case, I don’t think would really be feasible.)

I tried to deploy it quickly with one of the docker images via Portainer, but that didn’t really work.

I was able to deploy the same docker container https://github.com/blastehh/vuepress-docker without Portainer, but that Docker container’s documentation doesn’t really tell me where I would be able to see the output result or how to get it to build the pages.

If anybody has like a docker-compose file that I can use, your help is greatly appreciated.

Thank you.

2

Hi @alpha754293 :wave: I don’t have a docker-compose for you, but I’ll try to pick in on the things you mentioned in your post.

VuePress has a deployment page, listing different possibilities.
Static site generators like VuePress just generate “static” files/assets. Those files are HTML, CSS and javascript files, along with the required media like pictures, fonts, …

So all you need is some kind of server that can host these static files. There’s a very long list of possibilities on how to do that. GitLab Pages is one of them.

It seems indeed that the Docker container you found can build your VuePress config. Just note that the last update to the repo you mentioned was 2 years ago though. That container might be out-of-date…

You don’t need to install GitLab or it’s CI runner. You can just use the GitLab-hosted runners that they offer for free. In your GitLab config, you can configure the container image that you want to use for your CI step. If you use this image, I assume you won’t have to deal with setting up Nodejs/npm/pnpm. (But again, it might be out-of-date)

I’m still not 100% sure I properly understood your post, so let me know if this helped :slight_smile:

2 Likes
3

Thank you.

I appreciate your help.

I did manage to deploy Vuepress on my system. Had to go through the steps of installing Node.js, and pnpm, so that Vuepress would work.

I guess that I have been “spolied” with some of the Docker compose files that other people have put together where everything you need to run a particular application is all entirely contained within said Docker compose file.

And then to mimic the set up that I have at work, I deployed gitea at home, so that I would use VSCode to edit the .md files, and then put them up to some kind of a Git repo, and then have Vuepress update/regenerate the pages.

Haven’t done much with it yet since I set all that up, as I ended up switching from the default Vuepress theme to the Hope Vuepress theme, but am trying to think through how I want to re-organise my OneNote as that will dictate how I am going to set up the top and side nav config files before actually porting the content over.

The idea is there. I just haven’t touched it yet.

And it’s also a pity that I haven’t really been able to find a website which compares what the output of the different themes produces, so that I can select the most appropriate theme for the kind of OneNote conversion that I want to try to do.

4

Let me help a bit here.

Install Docker

sudo apt-get update
sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt-get update
sudo apt-get install -y docker-ce

Install Docker Compose

sudo apt-get install -y docker-compose

The easiest way to go about starting with something is to just do it ™ lol. So create a directory where you can screw around a bit and initialize the projects there. Mind you I despise JS. and played with vue and npm only a handful of times but Ill share what I can remember.

mkdir my-vuepress-project
cd my-vuepress-project
mkdir docs
cd docs
npm init -y
npm install vuepress

That should get a lot of it bootstrapped. Then create your README mardown file

echo '# My VuePress Documentation' > README.md

and create the config file

mkdir -p .vuepress
echo "module.exports = { title: 'My VuePress Site' };" > .vuepress/config.js

Bringing docker into this is trivial. At your project root (one level up from docs), create a docker-compose.yml file:

version: '3.7'
services:
  vuepress:
    image: vuepress/vuepress:latest
    volumes:
      - ./docs:/docs
    ports:
      - "8080:8080"
    command: vuepress dev docs --host 0.0.0.0 --port 8080

Im binding you to list on all IPs of the machine at port 8080 fyi. Change if you feel necessary

docker-compose up

GL HF… YMMV… other post scripts. good luck with your project haha!

2 Likes
5

Thank you.

Your help is greatly appreciated!