How do I get jekyll to run without server? - html

In order for me to view the site, it looks like I need to run bundle exec jekyll serve and open the server address in my web browser.
How do I go about having the viewing the site without running the command. I've went into the _site and clicked on the index.html file without running the server and noticed this.
Do you have any suggestions on how to go about this? There is no styling and none of the links works.
Is it possible to just place the .md file in posts folder and be able to view it without having to run a server still styled?
Any help would be appreciated.

You can build your static files using bundle exec jekyll build, then all your files will be in _site.
Now you need a server to serve theses static files. You can install something like nginx or apache.
Once it's done you'll want to copy your static files that are inside _site under /var/www/html/ and make sure your server is started with a command like:
sudo service nginx start

Related

Angular just show index.html and blank screen after build

based on Angular's official website, we should run "ng build" command to create files ready for hosting ( in dist folder ). But after running it, there is no content in index.html. Only the title of the page and if you run it or host it, you will only see a blank page. While if you run the ng serve command, the content will be displayed correctly. What is the problem?
Thanks.
You need to deploy your index.html with a deployment server like nginx server, apache server or angular deploy service, etc…
And make sure that index.html has base url=“/“.
Here you can check how to deplay with angular: https://angular.io/guide/deployment
Or
Apache server: https://httpd.apache.org/

How do I set the root directory for links while editing offline?

I'm making a website that I used to edit directly online on Neocities, but due to some problems, I'm looking to switch my editing to local offline. But I can't make my links point correctly to their targets, such as the favicon or my css files because locally, "/" doesn't point to the root.
Is there any program that allows me to set a folder as the root directory so these links can point properly? I'm currently trying Notepad++ but I haven't found a way to do so.
I know I could put the full path as "C:\folder\folder\file.css" for examle, but that would mean I'd have to edit the html of every single of my many pages and then re-edit them when I upload them online, and that's very undesirable. I need a way to preview the html locally without changing any paths, so my favicon link, for example, which currently is href="/favicon.png" can stay unchanged on all the pages. I could remove the "/" but then it wouldn't work for any pages within subfolders, and there's a lot of those in my project.
It's possible that I'm just missing some simple detail but I'm really just very much a beginner to making websites in general.
You can run a local web server to serve the contents of your root directory at a domain like http://localhost:8080. So rather than opening index.html in the browser you visit that URL instead.
There are a bunch of simple web servers you can use - my favourite for purposes like this is the NPM package http-server. It requires Node to be installed.
Install node
Install http-server by executing npm install -g http-server in your Terminal
Run the http-server by navigate to the website root folder and run http-server in your Terminal
http-server will produce an output that will tell you where to access the site.
Starting up http-server, serving ./
http-server version: 14.1.0
Available on:
http://127.0.0.1:8080
http://localhost:8080
Hit CTRL-C to stop the server

URL of a static site

I am working to develop my portfolio, a static site using Jekyll and ruby. When I first served it, I got the URL that went something like localhost:4000 as an output in the terminal.
Afterwards, I would pin the tab, and continue making changes to it.
But mistakenly, I closed the tab and the link from the history of the browser doesn't seem to work.
Can anyone help me get back the link?
I did try "cd myblog"
then, "bundle exec jekyll serve"
But this doesn't work.
From the Jekyll QuickStart guide:
Change into your directory, e.g.:
cd myblog
Build the site and make it available on a local server.
bundle exec jekyll serve
Browse to http://localhost:4000

Install jekyll blog on VPS

I'm trying very hard to install Jekyll blog
on my VPS because i want to host my website on my VPS not on github pages also I have followed the steps here
https://jekyllrb.com/docs/deployment-methods/
but i didnt succeed is there any one can help me to step by step install jekyll blog on my hosting
By looking at the image you attached in your comment, you probably uploaded jekyll files and not the static files which exists in the folder _site.
So what you have to do is, install jekyll using npm or RubyGems in your own machine, setup everything in your jekyll files, then use the command jekyll serve to build and check if everything is generated successfully by going to localhost:4000, if everything went well, then go to your jekyll directory and take the files inside _site and upload them to your webhost using FTP
You might want to consider to NOT install Jekyll on your VPS.
You can install it on your local machine. Jekyll is a static site generator and generates flat HTML files in the '_site' folder. This folder can be easily transmitted through FTP to your VPS after an update.
Another way to let your VPS host your Jekyll site and NOT install Jekyll, is to let the guys from CloudCannon do the Jekyll part and let them connect to your VPS through FTP. CloudCannon will automatically push the static site to your VPS on update. You will get their CMS for free as a bonus.

How can I setup Jekyll for a blog with a large image directory, so as to avoid duplicating that directory in the generated site?

I'm considering Jekyll for a site I'm putting together that will be a blog with lots of images (and other larg-ish media files). It's easy enough to to make a directory for images and then link to them as needed in the posts. But, as I understand it, when the site is generated, all the image data will be duplicated into the generated _site directory that holds the static files. Each time the site is generated the _site directory is emptied, and repopulated with the static version of the site.
Is there any way to, for example, drop a symlink to the images directory inside the site directory, and then maybe have jekyll ignore it when the static files are generated?
Or is there another way to go about this that makes more sense?
Assuming you are running on an apache web server, you can setup an Alias directive to serve images from a directory outside of the normal docroot. You need access to edit the VirtualHosts config or some other ability to create aliases directives (e.g. via a control panel).
For an example of how this would work, let's say you are storing your jekyll files under a directory called "/web/jekyll". To get your images directory do the following:
Add an "_images" directory along with your basic jekyll tree. Ending up with something like:
_config.yml
_images/
_layouts/
_posts/
_site/
index.md
Update your apache config to add the Alias directive like:
Alias /images /web/jekyll/_images
Reload the apache config and run jekyll to build the site.
Since the image directory name starts with an underscore, jekyll won't push/copy it to the output _site during the build. Apache will happily serve most files from your _site directory as normal, but when it sees something like "http://jekyll/images/test.jpg", instead of looking for the file under "/web/jekyll/_site/_images/test.jpg", it'll serve it from "/web/jekyll/_images/test.jpg".
Incidentally, I like a little more separation of the source content and output content than jekyll defaults to. So, I setup my directory structure as follows:
/web/jekyll/html/
/web/jekyll/images/
/web/jekyll/source/
/web/jekyll/source/_config.yml
/web/jekyll/source/_layouts
/web/jekyll/source/_posts
/web/jekyll/source/index.md
With the following option set in _config.yml
destination: ../html
And the apache alias directive setup with:
Alias /images /web/jekyll/images
Jekyll is run in the "/web/jekyll/source" directory, but output is sent to the "/web/jekyll/html" dir. Similar to the first example, calls to "http://jekyll/images/test.jpg" are served from "/web/jekyll/images/test.jpg". This setup doesn't really make a difference from a site serving perspective. I just like the cleaner separation between the raw source files, the fully baked output files and the images which work via the alias.
Correct, the first part of the jekyll command removes everything in the destination directory. The problem with that is the symlinks must be manually created again. So next, go ahead and create a script that does this each time.
Be sure that:
exclude: [jekyll, css, img] in the _config.yml file
linux: The ";" symbol runs first, second, third.. commands.
script: A file named jekyll with executable permissions containing
jekyll;
ln -s /var/www/css /var/www/_site/css;
ln -s /var/www/img /var/www/_site/img;
Finally run (./jekyll) that program instead of jekyll.
-Dan
Make a project page for the images.
Set up directory structure
/home/git/svnpenn.github.io
/home/git/img
Run Jekyll
# We cant add the symlink until after jekyll is done. We will remove the
# site folder and wait for it to rebuild.
rm -r _site
jekyll --server &
while [ ! -f _site/index.html ]
do
sleep 1
done
ln -s ../images _site/images
Note I was using this because I thought it would help publish time on GitHub
pages. It does not. GitHub can take 1-10 minutes to publish depending on the
server.
I know this has already been answered, but I went a slightly different route. I hosted all of my images in a public directory on Dropbox and use grunt to generate a manifest of the images. It keeps my repository small because the images don't get checked in. I detailed it a while back in a blog post.