ডাউনলোড না করে ব্রাউজারে পূর্বরূপ দেখতে সাধারণ রেন্ডার করা এইচটিএমএল পৃষ্ঠা হিসাবে গিথুবে কোনও এইচটিএমএল পৃষ্ঠা কীভাবে দেখতে পাবেন?


355

উপর http://github.com ডেভেলপার রাখা এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট এবং ইমেজ প্রকল্পের ফাইল। আমি কীভাবে ব্রাউজারে এইচটিএমএল আউটপুট দেখতে পারি?

উদাহরণস্বরূপ এটি: https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

যখন আমি এটি খুলি এটি লেখকের কোডের রেন্ডার করা HTML প্রদর্শন করে না show এটি পৃষ্ঠাটি উত্স কোড হিসাবে দেখায়।

এটি সরাসরি রেন্ডার করা এইচটিএমএল হিসাবে দেখা কি সম্ভব? অন্যথায় কেবল ফলাফল দেখতে আমার সর্বদা পুরো জিপটি ডাউনলোড করা দরকার।



1
জুন 2019 হিসাবে, Raw.githack.com সবচেয়ে সুবিধাজনক সমাধান বলে মনে হচ্ছে ( উপরের লিঙ্কযুক্ত প্রশ্নের উত্তর দেখুন )
লিওপোল্ড.টালিরজ

উত্তর:


455

গিটহাবের এইচটিএমএল ফাইলগুলির প্রাকদর্শন করার সবচেয়ে আরামদায়ক উপায়টি হল https://htmlpreview.github.io/ এ যান বা কেবল এটির মূল URL টিতে অর্থ সংশোধন করা হয়: https://htmlpreview.github.io/?https:// github.com/bartaz/impress.js/blob/master/index.html


@ ডেনিস: আপনি কোন ব্রাউজার এবং কোন ইউআরএল ব্যবহার করছেন? আপাতত, এটি কেবল ওয়েবকিট এবং গেকো ব্রাউজারগুলিকে সমর্থন করে।
নিিউটেক

32
মনে রাখবেন এটি কেবল সর্বজনীন ভাণ্ডারের জন্য কাজ করে। ব্যক্তিগত ব্যক্তিরা ত্রুটি বার্তাটি দেবেError: Cannot load file
এরিক ট্রটম্যান

37
htmlpreview.github.com জাভাস্ক্রিপ্ট এবং সিএসএস উপস্থাপনে আংশিকভাবে ব্যর্থ। বিকল্প Rawgit.com যথাযথ কন্টেন্ট-টাইপ শিরোনাম সহ ফাইল পরিবেশন করে আরও ভাল কাজ করে।
জুলিয়ান কারসিক 18

1
দুর্দান্ত সমাধান, আপনাকে ধন্যবাদ! আমি README.md ফাইলের উপসর্গের সাথে আমার আর নোটবুকগুলিতে লিঙ্কগুলি যুক্ত করেছি এবং এটি আমার এনবি এইচটিএমএল ফাইলটি খুব ভালভাবে রেন্ডার করে। এটি কীভাবে কাজ করে তা যদি কেউ দেখতে চায় তবে পৃষ্ঠাগুলি এখানে রয়েছে : github.com/sargdavid/snippets.cvi এবং htmlpreview.github.io/?https://github.com/sargdavid/…
ডেভিট

1
এই সমাধান মত দেখায় ডিসেম্বর 2018 এর শেষ দিন এ কাজ করেন স্টপ এখন পর্যন্ত অবশ্য আমরা এখনও এই আছে stackoverflow.com/a/8446391/860099
কামিল Kiełczewski

85

আপনি যদি কোনও সংরক্ষণাগার ডাউনলোড করতে না চান তবে আপনি এটি রেন্ডার করতে গিটহাব পৃষ্ঠাগুলি ব্যবহার করতে পারেন ।

  1. আপনার অ্যাকাউন্টে ভান্ডারটি কাঁটাচামচ করুন।
  2. এটি আপনার মেশিনে স্থানীয়ভাবে ক্লোন করুন
  3. একটি gh-pagesশাখা তৈরি করুন (যদি ইতিমধ্যে এটি উপস্থিত থাকে তবে এটি সরিয়ে ফেলুন এবং নতুন ভিত্তিক তৈরি করুন master)।
  4. গিটহাবে ফিরে শাখাটি পুশ করুন।
  5. পৃষ্ঠাগুলি ` এ দেখুন`http://username.github.io/repo

কোডে:

git clone git@github.com:username/repo.git
cd repo
git branch gh-pages
# Might need to do this first: git branch -D gh-pages
git push -u origin gh-pages # Push the new branch back to github
Go to http://username.github.io/repo

আমি কীভাবে গিথুব পৃষ্ঠাগুলিতে এটি অনুলিপি করতে পারি তা এখনই আমি একটি প্রকল্প তৈরি করেছি।
জিতেন্দ্র ব্যাস

1
একটি প্রক্রিয়া সহ আমার উত্তর আপডেট।
রস

3
এটি এখানে ভাল দস্তাবেজ করা হয়েছে help.github.com/articles/creating-project-pages-manally
Leif Gruenwoldt

2
কেন প্রথমে কোনও মাস্টার তৈরি করুন এবং এটি ক্লোন করুন (ম্যানুয়ালি-প্রকল্প-পৃষ্ঠা তৈরির ক্ষেত্রে "এটি নিরাপদ খেলুন")? একজন কি checkout --orphan gh-pages কেবল তা-ই করতে পারবেন না , একেবারেই মাস্টারের সাথে ঝামেলা ছাড়াই?
ড্যানিস

4
পৃষ্ঠাগুলি github.io এ স্থানান্তরিত হয়েছে, github.com আর নয়।
দাম্জন পাভলিকা

64

আপনি RawGit ব্যবহার করতে পারেন :
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html

এটি সঠিক লিখিত বিষয়বস্তু শিরোনাম সহ ফাইল পরিবেশন করে http://htmlpreview.github.com/ এর চেয়ে (এই লেখার সময়) ভাল কাজ করে । অতিরিক্তভাবে, এটি উত্পাদন ব্যবহারের জন্য সিডিএন URL সরবরাহ করে।


2
আমি নিশ্চিত করেছি যে এটি htmlpreview এর চেয়ে ভাল কাজ করে। কমপক্ষে, এটি আমার ওয়েবজিএল অ্যানিমেশনগুলি দেখাচ্ছে।
সিরিল ডুচন-ডরিস

1
এটি আসলে দ্রুত কাজ করে এবং বোকেহ ( উদাহরণস্বরূপ ) এর সাথে এটি কিছু ইন্টারঅ্যাকশন দেখায় (উদাহরণস্বরূপ টুলটিপস) যা এইচটিএমপ্ল্রিভিউয়ের সাথে কাজ করে না।
জাদিয়ানস

এইচটিএমপ্ল্রিভিউয়ের মতো, ব্যক্তিগত সংগ্রহস্থলগুলির সাথে কাজ করে না। গিট এর জন্য ইউআরএলগুলির জন্য সর্বজনীন ইউআরএল তৈরি করে? টোকেন = <হ্যাশ> যোগ করে, তবে এই সরঞ্জামগুলি এটি বুঝতে হবে এবং বাকীগুলির সাথে এটি একত্রে GH এ প্রেরণ করা উচিত।
জাকম্যাক

2
এটি কাঁচাঘাটের জন্য প্রায়শই জিজ্ঞাসিত প্রশ্নাবলীর থেকে: আমি কি কোনও প্রোডাকশন ওয়েবসাইটে বা সর্বজনীন উদাহরণ কোডে একটি Rawgit.com বিকাশ URL ব্যবহার করতে পারি? না। নিম্ন-ট্র্যাফিক পরীক্ষার জন্য বা বিকাশের সময় অল্প কিছু লোকের সাথে অস্থায়ী ডেমো ভাগ করে নেওয়ার জন্য কেবল কাঁচিটডটকমের ইউআরএল ব্যবহার করুন। ভারী ট্র্যাফিক বা লোকেরা তাদের নিজস্ব কোডে কপি এবং পেস্ট করতে পারে এমন কোনও কিছুর জন্য দয়া করে cdn.rawgit.com ব্যবহার করুন। ... আরও ব্যাখ্যা উপলব্ধ রয়েছে
ব্যারিপেই

3
নিশ্চিত করতে পারেন: রাগজিট 2019 সালের অক্টোবর পর্যন্ত বন্ধ হয়ে যাবে
সামকোযমিড

34

গিথুব পৃষ্ঠাগুলি সহ এটি করা খুব সহজ , আপনি প্রথমবার এটি করা কিছুটা অদ্ভুত। বুনন শিখতে গিয়ে প্রথমবারের মতো আপনাকে 3 টি বিড়ালছানা জগল করতে হয়েছিল। (ঠিক আছে, এটি খুব খারাপ কিছু নয়)

আপনার একটি ঘ-পৃষ্ঠাগুলি শাখা দরকার:

মূলত github.com সংগ্রহস্থলের একটি জিএইচ-পৃষ্ঠাগুলি শাখা সন্ধান করে। এটি ব্রাউজারে সরাসরি এইচটিএমএল হিসাবে এখানে খুঁজে পাওয়া সমস্ত এইচটিএমএল পৃষ্ঠাগুলি পরিবেশন করবে।

এই জি-পেজ শাখাটি কীভাবে পাব?

সহজ। শুধু তোমার GitHub নামক রেপো একটি শাখা তৈরি gh-pages--orphanআপনি যখন এই শাখাটি তৈরি করবেন সুনির্দিষ্ট করুন , যেহেতু আপনি আসলে এই শাখাটি আপনার গিথুব শাখায় ফেরত দিতে চান না, আপনি কেবল এমন একটি শাখা চান যাতে আপনার HTML সংস্থান রয়েছে।

$ git checkout --orphan gh-pages

আমার রেপোতে থাকা অন্যান্য সমস্ত বন্দুকের কী অবস্থা, এটি কীভাবে এটি খাপ খায়?

নাহ, আপনি কেবল এগিয়ে গিয়ে এটি মুছতে পারেন। এবং এখনই এটি করা নিরাপদ, কারণ আপনি মনোযোগ দিচ্ছেন এবং একটি অনাথ শাখা তৈরি করেছেন যা আপনার মূল শাখায় আবার মার্জ করা যাবে না এবং আপনার সমস্ত কোড সরিয়ে ফেলবে।

আমি শাখা তৈরি করেছি, এখন কী?

আপনাকে এই শাখাটি গিথুব ডট কম এড়াতে হবে, যাতে তাদের অটোমেশনটি আপনার পক্ষে এই পৃষ্ঠাগুলি হোস্টিং শুরু করতে পারে।

git push -u origin gh-pages

কিন্তু .. আমার এইচটিএমএল এখনও দেওয়া হচ্ছে না!

গিথুবকে এই শাখাগুলি সূচী করতে কয়েক মিনিট সময় লাগে এবং সামগ্রীটি পরিবেশন করতে প্রয়োজনীয় অবকাঠামো জ্বালিয়ে দেয়। গিথুব অনুযায়ী 10 মিনিট পর্যন্ত।

Github.com দ্বারা ধাপে ধাপগুলি

https://help.github.com/articles/creating-project-pages-manually


3
দুর্দান্ত কাজ করে। গিট নুব হিসাবে, আমি $ git commit -m 'init'আপনার লাইনের মধ্যে ভুলে গেছি
সিস্টেমেডডিক্ট

1
ইউআরএলটি কী হবে?
Koray Tugay

হুম ... বিড়ালছানা
জাগ্রাল

14

আমি সমস্ত মন্তব্য পড়েছি এবং ভেবেছিলাম যে গিটহাব থিম পৃষ্ঠাটি না দেখানো পর্যন্ত গিটহাব পৃষ্ঠাগুলি তৈরি করা সাধারণ ব্যবহারকারীর পক্ষে খুব কঠিন হয়ে পড়েছে যেখানে এর স্পষ্টভাবে উল্লেখ করা হয়েছে যে সেখানে রেট সম্পর্কিত পৃষ্ঠাগুলির সেটিংসের অধীনে "গিটহাব পৃষ্ঠাগুলি" এর একটি বিভাগ রয়েছে যেখানে আপনি পারেন "গিটহাব পৃষ্ঠাগুলির জন্য মাস্টার শাখা ব্যবহার করুন" বিকল্পটি চয়ন করুন। এবং voilà !! ... https://username.github.io/reponame এ নির্দিষ্ট রেপো চেকআউট করুন

আমার উত্তর সমর্থন করার জন্য স্ক্রিনশট


1

এছাড়াও, আপনি যদি ট্যাম্পারমনকি ব্যবহার করেন, আপনি এমন স্ক্রিপ্ট যুক্ত করতে পারেন যা preview with http://htmlpreview.github.com/'কাঁচা', 'দোষ' এবং 'ইতিহাস' বোতামগুলির পাশে ক্রিয়া মেনুতে বোতাম যুক্ত করবে।

স্ক্রিপ্ট এর মতো: https://gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d


1

আপনি নিম্নলিখিত ক্রোম এক্সটেনশানটি ব্যবহার করে এইচটিএমএল কোডটি প্রাকদর্শন করতে পারেন - Run Selected HTML, ব্যবহার করা বেশ সহজ।

আপনি যদি select all the codeগিটহাবের পঠন মোডে দেখতে চান তবে এটিও বেশ সহজ, প্রথমে মাউস কার্সারটিকে <html>উপরের প্রারম্ভিক বন্ধনীতে সরান , তারপরে Shiftকীটি ধরে রাখুন এবং তারপরে </html>নীচে অবস্থিত বন্ধনীটি কার্সারটি সরান ।

নির্বাচিত এইচটিএমএল চালান - ক্রোম ওয়েব স্টোর

https://chrome.google.com/webstore/detail/run-selected-html/eefflcdphpehljcadbmkdpopmbamfefl/

পদক্ষেপ 1 : পঠন মোডে, এইচটিএমএল কোডের সমস্ত অংশ নির্বাচন করুন।

পদক্ষেপ 2 : মাউস ডান ক্লিক করুন "সেলেটেড এইচটিএমএল চালান", তারপরে আপনি নতুন ট্যাবে রেন্ডার করা ফলাফল দেখতে পাবেন।

নির্বাচিত এইচটিএমএল চালান

চলমান ফলাফল: এখানে চিত্র বর্ণনা লিখুন


1

এখন, এটি পুরানো উত্তর (কারণ "বিষয়বস্তু-ধরণের বিকল্পগুলি সংশোধন করুন" এক্সটেনশান প্রত্যাশার মতো কাজ করছে না))

এই ক্রমটি কেবল ক্রোম ব্রাউজারের জন্য। আমি অন্যান্য ব্রাউজার সম্পর্কে নিশ্চিত নই।

  1. ক্রোম ব্রাউজারে "বিষয়বস্তু-ধরণের বিকল্পগুলি সংশোধন করুন" এক্সটেনশন যুক্ত করুন।
  2. "ক্রোম-এক্সটেনশন: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" ব্রাউজারে url খুলুন।
  3. কাঁচা ফাইল ইউআরএল জন্য নিয়ম যুক্ত করুন। উদাহরণ স্বরূপ:
    • ইউআরএল ফিল্টার: https: ///raw/master//fileName.html
    • আসল প্রকার: পাঠ্য / প্লেইন
    • প্রতিস্থাপনের ধরণ: পাঠ্য / এইচটিএমএল
  4. আপনি নিয়মে ইউআরএল যুক্ত ফাইল ব্রাউজারটি খুলুন (পদক্ষেপ 3) in

প্রশ্নকারী সম্ভবত রেন্ডার করা পৃষ্ঠাটি দেখতে চান wants
ওন্দ্র ŽiŽka

@ জাকম্যাক ব্রাউজারটি "পাঠ্য / প্লেইন" শিরোনাম প্রেরণ করছে তবে আপনাকে "পাঠ্য / এইচটিএমএল" প্রেরণ করতে হবে। আমি আমার ডেটা তৃতীয় পক্ষকে (" htmlpreview.github.com ") প্রেরণ করতে পারি না কেন আমি উপরের পদক্ষেপগুলি ব্যবহার করছি। উপরের পদক্ষেপগুলিতে আপনি url- এর জন্য নিয়মিত প্রকাশও ব্যবহার করতে পারেন।
বিজয়

আমি ঠিক এটি খুঁজছিলাম। আমি পৃষ্ঠাটি দেখতে চাই এবং বিটবাকেটের মতো দুটোই গিটতেও।
এডুয়ার্ডো রেইস

আমার পক্ষে কাজ করেনি।
এডুয়ার্ডো রেইস

@ এদুয়ার্ডোরিস আজ, আমি আমার মেশিনে পরীক্ষা করে দেখলাম, এটি এখন কাজ করছে না। হতে পারে, "বিষয়বস্তুর ধরণের বিকল্পগুলি পরিবর্তন করুন" এক্সটেনশনে কিছু পরিবর্তন। আমি যদি অন্য কোনও এক্সটেনশান পাই তবে আমি এখানে পোস্ট করব। ধন্যবাদ.
বিজয়

0

এটি সরাসরি উত্তর নয়, তবে আমি মনে করি এটি একটি দুর্দান্ত মিষ্টি বিকল্প।

http://www.s3auth.com/

এটি আপনাকে প্রাথমিক পৃষ্ঠাগুলির পিছনে আপনার পৃষ্ঠা হোস্ট করতে দেয় to আপনার ব্যক্তিগত গিথুব রেপোতে এপি ডক্সের মতো জিনিসগুলির জন্য দুর্দান্ত। আপনার এপিআই বিল্ডের অংশ হিসাবে কেবল একটি এস 3 বিজ্ঞাপন দিন।


দেখে মনে হচ্ছে তৃতীয় পক্ষের পরিষেবা যা গিটের সাথে সাধারণ কিছু নয়। এই প্রশ্নের প্রসঙ্গে এটি কীভাবে ব্যবহার করবেন নির্দেশ কোথায়?
স্ট্যালিনকো

-3

আপনি কেবল গিথুব পৃষ্ঠাগুলি চালু করতে পারেন। ^: _ ^

"গিটহাব পৃষ্ঠাগুলি" না গিয়ে "সেটিংস" এ ক্লিক করুন এবং "উত্স" এর অধীনে ড্রপডাউনটিতে ক্লিক করুন এবং আপনি যে শাখাটি সর্বজনীন করতে চান তা চয়ন করুন (যেখানে মূল এইচটিএমএল ফাইলটি অবস্থিত) aaaand vualaa। ^: _ ^

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.